<!DOCTYPE html><html class=split lang=en-US-x-hixie><script src=../link-fixup.js defer=""></script>
<!-- Mirrored from html.spec.whatwg.org/dev/images.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 10 Sep 2025 08:36:26 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
<meta charset=utf-8><meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name=viewport><title>HTML Standard, Edition for Web Developers</title><meta content=#3c790a name=theme-color><meta content="light dark" name=color-scheme><link rel=stylesheet href=../../resources.whatwg.org/standard-shared-with-dev.css crossorigin=""><link rel=icon href=https://resources.whatwg.org/logo.svg crossorigin=""><link rel=stylesheet href=styles.css crossorigin=""><script>
   function toggleStatus(div) {
     div.parentNode.classList.toggle('wrapped');
   }
   function setLinkFragment(link) {
     link.hash = location.hash;
   }
  </script><body>
  <script async="" src=search.js></script>
  
  
  <header id=head class="head with-buttons">
   <a href=https://whatwg.org/ class=logo><img width=100 alt=WHATWG crossorigin="" class=darkmode-aware src=https://resources.whatwg.org/logo.svg height=100></a>
   
   <hgroup><h1><a rel=home href=index.html>HTML: The Living Standard</a></h1><p id=dev-edition-h2>Edition for Web Developers — Last Updated <span class=pubdate>10 September 2025</span></hgroup>
   

   <div id=search>
    <input placeholder="Search. Press '/'" autocomplete=off name=query id=query type=search>
    <ol id=results></ol>
   </div>
  </header>

  

  

  

  
  

  
  

  

  <nav><a href=embedded-content.html>← 4.8 Embedded content</a> — <a href=index.html>Table of Contents</a> — <a href=iframe-embed-object.html>4.8.5 The
  iframe element →</a></nav><ol class=toc><li><ol><li><ol><li><a href=images.html#images><span class=secno>4.8.4</span> Images</a><ol><li><a href=images.html#introduction-3><span class=secno>4.8.4.1</span> Introduction</a><ol><li><a href=images.html#adaptive-images><span class=secno>4.8.4.1.1</span> Adaptive images</a></ol><li><a href=images.html#attributes-common-to-source-and-img-elements><span class=secno>4.8.4.2</span> Attributes common to <code>source</code>,
  <code>img</code>, and <code>link</code> elements</a><ol><li><a href=images.html#srcset-attributes><span class=secno>4.8.4.2.1</span> Srcset attributes</a><li><a href=images.html#sizes-attributes><span class=secno>4.8.4.2.2</span> Sizes attributes</a></ol><li><a href=images.html#alt><span class=secno>4.8.4.3</span> Requirements for providing text to act as an alternative for images</a><ol><li><a href=images.html#general-guidelines><span class=secno>4.8.4.3.1</span> General guidelines</a><li><a href=images.html#a-link-or-button-containing-nothing-but-the-image><span class=secno>4.8.4.3.2</span> A link or button containing nothing but the image</a><li><a href=images.html#a-phrase-or-paragraph-with-an-alternative-graphical-representation:-charts,-diagrams,-graphs,-maps,-illustrations><span class=secno>4.8.4.3.3</span> A phrase or paragraph with an alternative graphical representation: charts, diagrams, graphs, maps, illustrations</a><li><a href=images.html#a-short-phrase-or-label-with-an-alternative-graphical-representation:-icons,-logos><span class=secno>4.8.4.3.4</span> A short phrase or label with an alternative graphical representation: icons, logos</a><li><a href=images.html#text-that-has-been-rendered-to-a-graphic-for-typographical-effect><span class=secno>4.8.4.3.5</span> Text that has been rendered to a graphic for typographical effect</a><li><a href=images.html#a-graphical-representation-of-some-of-the-surrounding-text><span class=secno>4.8.4.3.6</span> A graphical representation of some of the surrounding text</a><li><a href=images.html#ancillary-images><span class=secno>4.8.4.3.7</span> Ancillary images</a><li><a href="images.html#a-purely-decorative-image-that-doesn't-add-any-information"><span class=secno>4.8.4.3.8</span> A purely decorative image that doesn't add any information</a><li><a href=images.html#a-group-of-images-that-form-a-single-larger-picture-with-no-links><span class=secno>4.8.4.3.9</span> A group of images that form a single larger picture with no links</a><li><a href=images.html#a-group-of-images-that-form-a-single-larger-picture-with-links><span class=secno>4.8.4.3.10</span> A group of images that form a single larger picture with links</a><li><a href=images.html#a-key-part-of-the-content><span class=secno>4.8.4.3.11</span> A key part of the content</a><li><a href=images.html#an-image-not-intended-for-the-user><span class=secno>4.8.4.3.12</span> An image not intended for the user</a><li><a href=images.html#an-image-in-an-e-mail-or-private-document-intended-for-a-specific-person-who-is-known-to-be-able-to-view-images><span class=secno>4.8.4.3.13</span> An image in an email or private document intended for a specific person who is known to be able to view images</a></ol></ol></ol></ol></ol><h4 id=images><span class=secno>4.8.4</span> Images<a href=#images class=self-link></a></h4>

  <h5 id=introduction-3><span class=secno>4.8.4.1</span> Introduction<a href=#introduction-3 class=self-link></a></h5>

  

  <p>To embed an image in HTML, when there is only a single image resource, use the <code id=introduction-3:the-img-element><a href=embedded-content.html#the-img-element>img</a></code>
  element and its <code id=introduction-3:attr-img-src><a href=embedded-content.html#attr-img-src>src</a></code> attribute.</p>

  <div class=example>

<pre><code class='html'><c- p>&lt;</c-><c- f>h2</c-><c- p>&gt;</c->From today&apos;s featured article<c- p>&lt;/</c-><c- f>h2</c-><c- p>&gt;</c->
<strong><c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;/uploads/100-marie-lloyd.jpg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;&quot;</c-> <c- e>width</c-><c- o>=</c-><c- s>&quot;100&quot;</c-> <c- e>height</c-><c- o>=</c-><c- s>&quot;150&quot;</c-><c- p>&gt;</c-></strong>
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>b</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/wiki/Marie_Lloyd&quot;</c-><c- p>&gt;</c->Marie Lloyd<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;&lt;/</c-><c- f>b</c-><c- p>&gt;</c-> (1870–1922)
was an English <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/wiki/Music_hall&quot;</c-><c- p>&gt;</c->music hall<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-> singer, ...</code></pre>

  </div>

  <p>However, there are a number of situations for which the author might wish to use multiple image
  resources that the user agent can choose from:</p>

  <ul><li>
    <p>Different users might have different environmental characteristics:</p>

    <ul><li>
      <p>The users' physical screen size might be different from one another.</p>

      <div class=example>
       <p>A mobile phone's screen might be 4 inches diagonally, while a laptop's screen might be 14
       inches diagonally.</p>

       <svg font-size=2.5 role=img viewBox="0 0 80 32" font-family=sans-serif height=200 aria-label="The phone's screen is much smaller compared to the laptop's screen.">
        
        <rect rx=1 x=6 y=18 stroke=black width=6 fill=white height=12></rect>
        <text transform="translate(9 24)
        rotate(-60)" text-anchor=middle dominant-baseline=middle>4″</text>
        
        <rect y=2 stroke=black width=40 stroke-width=2 fill=white height=26 rx=2 x=30></rect>
        <line y1=30 y2=30 stroke-width=2 stroke=black x1=26 stroke-linecap=round x2=74></line>
        <text transform="translate(50 15)
        rotate(-30)" text-anchor=middle dominant-baseline=middle>14″</text>
       </svg>
      </div>

      <p class=note>This is only relevant when an image's rendered size depends on the
      <a id=introduction-3:viewport href=https://drafts.csswg.org/css2/#viewport data-x-internal=viewport>viewport</a> size.</p>
     <li>
      <p>The users' screen pixel density might be different from one another.</p>

      <div class=example>
       <p>A mobile phone's screen might have three times as many physical pixels per inch
      compared to another mobile phone's screen, regardless of their physical screen size.</p>

       <svg font-size=2.5 role=img viewBox="0 0 56 27" font-family=sans-serif height=170 aria-label="One phone has big pixels, the other has small pixels.">
        <defs>
         <pattern x=0 y=0 id=img-intro-pixel width=3 patternUnits=userSpaceOnUse height=3 stroke-linecap=round>
          <rect x=0 y=0 fill=black width=3 height=3></rect>
          <line x1=0.5 x2=0.5 stroke=red y1=0.5 y2=2.5></line>
          <line x1=1.5 x2=1.5 stroke=lime y1=0.5 y2=2.5></line>
          <line x1=2.5 x2=2.5 stroke=blue y1=0.5 y2=2.5></line>
         </pattern>
        </defs>
        
        <rect rx=1 x=6 y=8 stroke=black width=6 fill=white height=12></rect>
        <rect rx=1 x=36 y=8 stroke=black width=6 fill=white height=12></rect>
        
        <line y2=24 stroke-width=3 stroke=brown x1=15 x2=22 y1=16></line>
        <circle fill=url(#img-intro-pixel) stroke=black cx=10 r=8 cy=10></circle>
        <line y2=24 stroke-width=3 stroke=brown x1=45 x2=52 y1=16></line>
        <circle stroke-width=3 stroke=black fill=url(#img-intro-pixel) cx=120 r=24 cy=30 transform=scale(0.333333)></circle>
        
        <text x=20 y=10 dominant-baseline=middle>1x</text>
        <text x=50 y=10 dominant-baseline=middle>3x</text>
       </svg>
      </div>
     <li>
      <p>The users' zoom level might be different from one another, or might change for a single
      user over time.</p>

      <p class=example>A user might zoom in to a particular image to be able to get a more
      detailed look.</p>

      <p>The zoom level and the screen pixel density (the previous point) can both affect the number
      of physical screen pixels per <a href=https://drafts.csswg.org/css-values/#px id="introduction-3:'px'" data-x-internal="'px'">CSS pixel</a>. This ratio is usually
      referred to as <dfn id=device-pixel-ratio>device-pixel-ratio</dfn>.</p>
     <li>
      <p>The users' screen orientation might be different from one another, or might change for a
      single user over time.</p>

      <div class=example>
       <p>A tablet can be held upright or rotated 90 degrees, so that the screen is either
       "portrait" or "landscape".</p>

       <svg font-size=2.5 role=img viewBox="0 0 60 32" font-family=sans-serif height=200 aria-label="The tablet has two orientations.">
        
        <rect rx=1 x=6 y=5 stroke=black width=14 fill=white height=20></rect>
        <line y2=24 stroke-width=1.1 stroke=black x1=6 x2=20 y1=24></line>
        <text text-anchor=middle x=13 y=14.5 dominant-baseline=middle>Portrait</text>
        <rect rx=1 x=30 y=11 stroke=black width=20 fill=white height=14></rect>
        <line y2=11 stroke-width=1.1 stroke=black x1=31 x2=31 y1=25></line>
        <text text-anchor=middle x=40.5 y=18 dominant-baseline=middle>Landscape</text>
       </svg>
      </div>
     <li>
      <p>The users' network speed, network latency and bandwidth cost might be different from one
      another, or might change for a single user over time.</p>

      <p class=example>A user might be on a fast, low-latency and constant-cost connection while
      at work, on a slow, low-latency and constant-cost connection while at home, and on a
      variable-speed, high-latency and variable-cost connection anywhere else.</p>
     </ul>
   <li>
    <p>Authors might want to show the same image content but with different rendered size depending
    on, usually, the width of the <a id=introduction-3:viewport-2 href=https://drafts.csswg.org/css2/#viewport data-x-internal=viewport>viewport</a>. This is usually referred to as
    <dfn id=viewport-based-selection>viewport-based selection</dfn>.</p>

    <div class=example>
     <p>A web page might have a banner at the top that always spans the entire <a id=introduction-3:viewport-3 href=https://drafts.csswg.org/css2/#viewport data-x-internal=viewport>viewport</a>
     width. In this case, the rendered size of the image depends on the physical size of the screen
     (assuming a maximised browser window).</p>

     <svg aria-label="The upright-held phone shows a
     small wolf at the top, and the tablet shows the same image but it is bigger." role=img height=160 viewBox="0 0 52 25.6">
      

      
      <rect rx=1 x=6 y=8 stroke=black width=6 fill=white height=12></rect>
      <rect x=7 y=9 fill=#716966 width=4 height=2></rect>
      <image x=7 y=9 width=4 xlink:href=../images/wolf.jpg height=2></image>

      
      <rect rx=1 x=25 y=6 stroke=black width=20 fill=white height=14></rect>
      <line y2=6 stroke-width=1.1 stroke=black x1=26 x2=26 y1=20></line>
      <rect x=27 y=7 fill=#716966 width=17 height=8.5></rect>
      <image x=27 y=7 width=17 xlink:href=../images/wolf.jpg height=8.5></image>

     </svg>
    </div>

    <div class=example>
     <p>Another web page might have images in columns, with a single column for screens with a small
     physical size, two columns for screens with medium physical size, and three columns for screens
     with big physical size, with the images varying in rendered size in each case to fill up the
     <a id=introduction-3:viewport-4 href=https://drafts.csswg.org/css2/#viewport data-x-internal=viewport>viewport</a>. In this case, the rendered size of an image might be <em>bigger</em> in
     the one-column layout compared to the two-column layout, despite the screen being smaller.</p>

     <svg font-size=2.5 role=img viewBox="0 0 115 32" font-family=sans-serif height=200 aria-label="The rotated phone shows a top part of an image of a kettlebell swing; the
     upright-held tablet shows a bit smaller images in two columns; the laptop shows images in three
     columns.">
      

      
      <rect rx=1 x=6 y=24 stroke=black width=12 fill=white height=6></rect>
      <rect x=7 y=25 fill=#987b5a width=10 height=4.5></rect>
      <image xlink:href=../images/kettlebell.jpg preserveAspectRatio="xMinYMin slice" width=10 x=7 height=4.5 y=25></image>
      <text text-anchor=middle x=12 y=21>Narrow, 1 column</text>

      
      <rect rx=1 x=32 y=10 stroke=black width=14 fill=white height=20></rect>
      <line y2=29 stroke-width=1.1 stroke=black x1=32 x2=46 y1=29></line>
      <rect x=33 y=11 fill=#987b5a width=5.5 height=5.5></rect>
      <image x=33 y=11 width=5.5 xlink:href=../images/kettlebell.jpg height=5.5></image>
      <rect x=39.5 y=11 fill=burlywood width=5.5 height=5.5></rect>
      <rect x=33 y=17.5 fill=silver width=5.5 height=5.5></rect>
      <text text-anchor=middle x=39 y=7>Medium, 2 columns</text>

      
      <rect y=2 stroke=black width=40 stroke-width=2 fill=white height=26 rx=2 x=65></rect>
      <line y1=30 y2=30 stroke-width=2 stroke=black x1=61 stroke-linecap=round x2=109></line>
      <rect x=67 y=4 fill=#987b5a width=10 height=10></rect>
      <image x=67 y=4 width=10 xlink:href=../images/kettlebell.jpg height=10></image>
      <rect x=80 y=4 fill=burlywood width=10 height=10></rect>
      <rect x=93 y=4 fill=silver width=10 height=10></rect>
      <text text-anchor=middle x=85 y=25>Wide, 3 columns</text>
     </svg>
    </div>
   <li>
    <p>Authors might want to show different image content depending on the rendered size of the
    image. This is usually referred to as <dfn id=art-direction>art direction</dfn>.</p>

    <div class=example>
     <p>When a web page is viewed on a screen with a large physical size (assuming a maximised
     browser window), the author might wish to include some less relevant parts surrounding the
     critical part of the image. When the same web page is viewed on a screen with a small physical
     size, the author might wish to show only the critical part of the image.</p>

     <svg aria-label="The upright-held phone shows a
     cropped image of a wolf; the rotated tablet shows the uncropped image." role=img height=160 viewBox="0 0 52 25.6">
      

      
      <rect rx=1 x=6 y=8 stroke=black width=6 fill=white height=12></rect>
      <rect x=7 y=9 fill=#716966 width=4 height=6></rect>
      <image xlink:href=../images/wolf.jpg preserveAspectRatio="xMidYMid slice" width=4 x=7 height=6 y=9></image>

      
      <rect rx=1 x=25 y=6 stroke=black width=20 fill=white height=14></rect>
      <line y2=6 stroke-width=1.1 stroke=black x1=26 x2=26 y1=20></line>
      <rect x=27 y=7 fill=#716966 width=17 height=8.5></rect>
      <image x=27 y=7 width=17 xlink:href=../images/wolf.jpg height=8.5></image>

     </svg>
    </div>
   <li>
    <p>Authors might want to show the same image content but using different image formats,
    depending on which image formats the user agent supports. This is usually referred to as
    <dfn id=image-format-based-selection>image format-based selection</dfn>.</p>

    <p class=example>A web page might have some images in the JPEG, WebP and JPEG XR image
    formats, with the latter two having better compression abilities compared to JPEG. Since
    different user agents can support different image formats, with some formats offering better
    compression ratios, the author would like to serve the better formats to user agents that
    support them, while providing JPEG fallback for user agents that don't.</p>
   </ul>

  <p>The above situations are not mutually exclusive. For example, it is reasonable to combine
  different resources for different <a href=#device-pixel-ratio id=introduction-3:device-pixel-ratio>device-pixel-ratio</a> with different resources for
  <a href=#art-direction id=introduction-3:art-direction>art direction</a>.</p>

  <p>While it is possible to solve these problems using scripting, doing so introduces some other
  problems:</p>

  <ul><li><p>Some user agents aggressively download images specified in the HTML markup, before scripts
   have had a chance to run, so that web pages complete loading sooner. If a script changes which
   image to download, the user agent will potentially start two separate downloads, which can
   instead cause worse page loading performance.<li><p>If the author avoids specifying any image in the HTML markup and instead instantiates a
   single download from script, that avoids the double download problem above but then no image will
   be downloaded at all for users with scripting disabled and the aggressive image downloading
   optimization will also be disabled.</ul>

  <p>With this in mind, this specification introduces a number of features to address the above
  problems in a declarative manner.</p>

  <dl><dt><a href=#device-pixel-ratio id=introduction-3:device-pixel-ratio-2>Device-pixel-ratio</a>-based selection when the rendered size of the image is
   fixed<dd>
    <p>The <code id=introduction-3:attr-img-src-2><a href=embedded-content.html#attr-img-src>src</a></code> and <code id=introduction-3:attr-img-srcset><a href=embedded-content.html#attr-img-srcset>srcset</a></code>
    attributes on the <code id=introduction-3:the-img-element-2><a href=embedded-content.html#the-img-element>img</a></code> element can be used, using the <code>x</code>
    descriptor, to provide multiple images that only vary in their size (the smaller image is a
    scaled-down version of the bigger image).</p>

    <p class=note>The <code>x</code> descriptor is not appropriate when the rendered
    size of the image depends on the <a id=introduction-3:viewport-5 href=https://drafts.csswg.org/css2/#viewport data-x-internal=viewport>viewport</a> width
    (<a href=#viewport-based-selection id=introduction-3:viewport-based-selection>viewport-based selection</a>), but can be used together with
    <a href=#art-direction id=introduction-3:art-direction-2>art direction</a>.</p>

    <div class=example>

<pre><code class='html'><c- p>&lt;</c-><c- f>h2</c-><c- p>&gt;</c->From today&apos;s featured article<c- p>&lt;/</c-><c- f>h2</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>img</c-> <strong><c- e>src</c-><c- o>=</c-><c- s>&quot;/uploads/100-marie-lloyd.jpg&quot;</c-></strong>
     <strong><c- e>srcset</c-><c- o>=</c-><c- s>&quot;/uploads/150-marie-lloyd.jpg 1.5x, /uploads/200-marie-lloyd.jpg 2x&quot;</c-></strong>
     <c- e>alt</c-><c- o>=</c-><c- s>&quot;&quot;</c-> <c- e>width</c-><c- o>=</c-><c- s>&quot;100&quot;</c-> <c- e>height</c-><c- o>=</c-><c- s>&quot;150&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>b</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/wiki/Marie_Lloyd&quot;</c-><c- p>&gt;</c->Marie Lloyd<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;&lt;/</c-><c- f>b</c-><c- p>&gt;</c-> (1870–1922)
was an English <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/wiki/Music_hall&quot;</c-><c- p>&gt;</c->music hall<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-> singer, ...</code></pre>

     <p>The user agent can choose any of the given resources depending on the user's screen's pixel
     density, zoom level, and possibly other factors such as the user's network conditions.</p>

     <p>For backwards compatibility with older user agents that don't yet understand the <code id=introduction-3:attr-img-srcset-2><a href=embedded-content.html#attr-img-srcset>srcset</a></code> attribute, one of the URLs is specified in the
     <code id=introduction-3:the-img-element-3><a href=embedded-content.html#the-img-element>img</a></code> element's <code id=introduction-3:attr-img-src-3><a href=embedded-content.html#attr-img-src>src</a></code> attribute. This will result
     in something useful (though perhaps lower-resolution than the user would like) being displayed
     even in older user agents. For new user agents, the <code id=introduction-3:attr-img-src-4><a href=embedded-content.html#attr-img-src>src</a></code>
     attribute participates in the resource selection, as if it was specified in <code id=introduction-3:attr-img-srcset-3><a href=embedded-content.html#attr-img-srcset>srcset</a></code> with a <code>1x</code> descriptor.</p>

     <p>The image's rendered size is given in the <code id=introduction-3:attr-dim-width><a href=embedded-content-other.html#attr-dim-width>width</a></code> and
     <code id=introduction-3:attr-dim-height><a href=embedded-content-other.html#attr-dim-height>height</a></code> attributes, which allows the user agent to
     allocate space for the image before it is downloaded.</p>

    </div>
   <dt><a href=#viewport-based-selection id=introduction-3:viewport-based-selection-2>Viewport-based selection</a><dd>
    <p>The <code id=introduction-3:attr-img-srcset-4><a href=embedded-content.html#attr-img-srcset>srcset</a></code> and <code id=introduction-3:attr-img-sizes><a href=embedded-content.html#attr-img-sizes>sizes</a></code> attributes can be used, using the <code>w</code>
    descriptor, to provide multiple images that only vary in their size (the smaller image is a
    scaled-down version of the bigger image).</p>

    <div class=example>

     <p>In this example, a banner image takes up the entire <a id=introduction-3:viewport-6 href=https://drafts.csswg.org/css2/#viewport data-x-internal=viewport>viewport</a> width (using
     appropriate CSS).</p>

<pre><code class='html'><c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;&lt;</c-><c- f>img</c-> <strong><c- e>sizes</c-><c- o>=</c-><c- s>&quot;100vw&quot;</c-> <c- e>srcset</c-><c- o>=</c-><c- s>&quot;wolf-400.jpg 400w, wolf-800.jpg 800w, wolf-1600.jpg 1600w&quot;</c-></strong>
     <c- e>src</c-><c- o>=</c-><c- s>&quot;wolf-400.jpg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;The rad wolf&quot;</c-><c- p>&gt;&lt;/</c-><c- f>h1</c-><c- p>&gt;</c-></code></pre>

     <p>The user agent will calculate the effective pixel density of each image from the specified
     <code>w</code> descriptors and the specified rendered size in the <code id=introduction-3:attr-img-sizes-2><a href=embedded-content.html#attr-img-sizes>sizes</a></code> attribute. It can then choose any of the given resources
     depending on the user's screen's pixel density, zoom level, and possibly other factors such as
     the user's network conditions.</p>

     <p>If the user's screen is 320 <a href=https://drafts.csswg.org/css-values/#px id="introduction-3:'px'-2" data-x-internal="'px'">CSS pixels</a> wide, this is equivalent
     to specifying <code>wolf-400.jpg 1.25x, wolf-800.jpg 2.5x, wolf-1600.jpg 5x</code>.
     On the other hand, if the user's screen is 1200 <a href=https://drafts.csswg.org/css-values/#px id="introduction-3:'px'-3" data-x-internal="'px'">CSS pixels</a> wide,
     this is equivalent to specifying <code>wolf-400.jpg 0.33x, wolf-800.jpg 0.67x, wolf-1600.jpg 1.33x</code>. By using the
     <code>w</code> descriptors and the <code id=introduction-3:attr-img-sizes-3><a href=embedded-content.html#attr-img-sizes>sizes</a></code>
     attribute, the user agent can choose the correct image source to download regardless of how
     large the user's device is.</p>

     <p>For backwards compatibility, one of the URLs is specified in the <code id=introduction-3:the-img-element-4><a href=embedded-content.html#the-img-element>img</a></code> element's
     <code id=introduction-3:attr-img-src-5><a href=embedded-content.html#attr-img-src>src</a></code> attribute. In new user agents, the <code id=introduction-3:attr-img-src-6><a href=embedded-content.html#attr-img-src>src</a></code> attribute is ignored when the <code id=introduction-3:attr-img-srcset-5><a href=embedded-content.html#attr-img-srcset>srcset</a></code> attribute uses <code>w</code> descriptors.</p>

    </div>

    <div class=example>

     <p>In this example, the web page has three layouts depending on the width of the
     <a id=introduction-3:viewport-7 href=https://drafts.csswg.org/css2/#viewport data-x-internal=viewport>viewport</a>. The narrow layout has one column of images (the width of each image is
     about 100%), the middle layout has two columns of images (the width of each image is about
     50%), and the widest layout has three columns of images, and some page margin (the width of
     each image is about 33%). It breaks between these layouts when the <a id=introduction-3:viewport-8 href=https://drafts.csswg.org/css2/#viewport data-x-internal=viewport>viewport</a> is
     <code>30em</code> wide and <code>50em</code> wide, respectively.</p>

<pre><code class='html'><c- p>&lt;</c-><c- f>img</c-> <strong><c- e>sizes</c-><c- o>=</c-><c- s>&quot;(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)&quot;</c-></strong>
     <strong><c- e>srcset</c-><c- o>=</c-><c- s>&quot;swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w&quot;</c-></strong>
     <c- e>src</c-><c- o>=</c-><c- s>&quot;swing-400.jpg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;Kettlebell Swing&quot;</c-><c- p>&gt;</c-></code></pre>

     <p>The <code id=introduction-3:attr-img-sizes-4><a href=embedded-content.html#attr-img-sizes>sizes</a></code> attribute sets up the layout breakpoints at
     <code>30em</code> and <code>50em</code>, and declares the image sizes
     between these breakpoints to be <code>100vw</code>, <code>50vw</code>, or
     <code>calc(33vw - 100px)</code>. These sizes do not necessarily have to match up
     exactly with the actual image width as specified in the CSS.</p>

     <p>The user agent will pick a width from the <code id=introduction-3:attr-img-sizes-5><a href=embedded-content.html#attr-img-sizes>sizes</a></code>
     attribute, using the first item with a <a id=introduction-3:media-condition href=https://drafts.csswg.org/mediaqueries/#typedef-media-condition data-x-internal=media-condition>&lt;media-condition></a> (the part in
     parentheses) that evaluates to true, or using the last item (<code>calc(33vw -
     100px)</code>) if they all evaluate to false.</p>

     <p>For example, if the <a id=introduction-3:viewport-9 href=https://drafts.csswg.org/css2/#viewport data-x-internal=viewport>viewport</a> width is <code>29em</code>, then <code>(max-width: 30em)</code> evaluates to true and <code>100vw</code> is used,
     so the image size, for the purpose of resource selection, is <code>29em</code>. If
     the <a id=introduction-3:viewport-10 href=https://drafts.csswg.org/css2/#viewport data-x-internal=viewport>viewport</a> width is instead <code>32em</code>, then
     <code>(max-width: 30em)</code> evaluates to false, but
     <code>(max-width: 50em)</code> evaluates to true
     and <code>50vw</code> is used, so the image size, for the purpose of resource
     selection, is <code>16em</code> (half the <a id=introduction-3:viewport-11 href=https://drafts.csswg.org/css2/#viewport data-x-internal=viewport>viewport</a> width). Notice that
     the slightly wider <a id=introduction-3:viewport-12 href=https://drafts.csswg.org/css2/#viewport data-x-internal=viewport>viewport</a> results in a smaller image because of the different
     layout.</p>

     <p>The user agent can then calculate the effective pixel density and choose an appropriate
     resource similarly to the previous example.</p>

    </div>

    <div class=example>

     <p>This example is the same as the previous example, but the image is <a href=urls-and-fetching.html#attr-loading-lazy-state id=introduction-3:attr-loading-lazy-state>lazy-loaded</a>. In this case, the <code id=introduction-3:attr-img-sizes-6><a href=embedded-content.html#attr-img-sizes>sizes</a></code> attribute can use the <code id=introduction-3:valdef-sizes-auto><a href=#valdef-sizes-auto>auto</a></code> keyword, and the user agent will use the <code id=introduction-3:attr-dim-width-2><a href=embedded-content-other.html#attr-dim-width>width</a></code> attribute (or the width specified in CSS) for the
     <span>source size</span>.</p>

<pre><code class='html'><c- p>&lt;</c-><c- f>img</c-> <strong><c- e>loading</c-><c- o>=</c-><c- s>&quot;lazy&quot;</c-> <c- e>width</c-><c- o>=</c-><c- s>&quot;200&quot;</c-> <c- e>height</c-><c- o>=</c-><c- s>&quot;200&quot;</c-> <c- e>sizes</c-><c- o>=</c-><c- s>&quot;auto&quot;</c-></strong>
     <c- e>srcset</c-><c- o>=</c-><c- s>&quot;swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w&quot;</c->
     <c- e>src</c-><c- o>=</c-><c- s>&quot;swing-400.jpg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;Kettlebell Swing&quot;</c-><c- p>&gt;</c-></code></pre>

     <p>For better backwards-compatibility with legacy user agents that don't support the <code id=introduction-3:valdef-sizes-auto-2><a href=#valdef-sizes-auto>auto</a></code> keyword, fallback sizes can be specified if desired.</p>

<pre><code class='html'><c- p>&lt;</c-><c- f>img</c-> <c- e>loading</c-><c- o>=</c-><c- s>&quot;lazy&quot;</c-> <c- e>width</c-><c- o>=</c-><c- s>&quot;200&quot;</c-> <c- e>height</c-><c- o>=</c-><c- s>&quot;200&quot;</c->
     <strong><c- e>sizes</c-><c- o>=</c-><c- s>&quot;auto, (max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)&quot;</c-></strong>
     <c- e>srcset</c-><c- o>=</c-><c- s>&quot;swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w&quot;</c->
     <c- e>src</c-><c- o>=</c-><c- s>&quot;swing-400.jpg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;Kettlebell Swing&quot;</c-><c- p>&gt;</c-></code></pre>

    </div>
   <dt><a href=#art-direction id=introduction-3:art-direction-3>Art direction</a>-based selection<dd>
    <p>The <code id=introduction-3:the-picture-element><a href=embedded-content.html#the-picture-element>picture</a></code> element and the <code id=introduction-3:the-source-element><a href=embedded-content.html#the-source-element>source</a></code> element, together with the <code id=introduction-3:attr-source-media><a href=embedded-content.html#attr-source-media>media</a></code> attribute, can be used to provide multiple images that
    vary the image content (for instance the smaller image might be a cropped version of the bigger
    image).</p>

    <div class=example>

<pre><code class='html'><c- p>&lt;</c-><c- f>picture</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>source</c-> <strong><c- e>media</c-><c- o>=</c-><c- s>&quot;(min-width: 45em)&quot;</c-></strong> <c- e>srcset</c-><c- o>=</c-><c- s>&quot;large.jpg&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>source</c-> <strong><c- e>media</c-><c- o>=</c-><c- s>&quot;(min-width: 32em)&quot;</c-></strong> <c- e>srcset</c-><c- o>=</c-><c- s>&quot;med.jpg&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;small.jpg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;The wolf runs through the snow.&quot;</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>picture</c-><c- p>&gt;</c-></code></pre>

     <p>The user agent will choose the first <code id=introduction-3:the-source-element-2><a href=embedded-content.html#the-source-element>source</a></code> element for which the media query
     in the <code id=introduction-3:attr-source-media-2><a href=embedded-content.html#attr-source-media>media</a></code> attribute matches, and then choose an
     appropriate URL from its <code id=introduction-3:attr-source-srcset><a href=embedded-content.html#attr-source-srcset>srcset</a></code> attribute.</p>

     <p>The rendered size of the image varies depending on which resource is chosen. To specify
     dimensions that the user agent can use before having downloaded the image, CSS can be used.</p>

<pre><code class='css'><c- f>img </c-><c- p>{</c-> <c- k>width</c-><c- p>:</c-> <c- m>300</c-><c- l>px</c-><c- p>;</c-> <c- k>height</c-><c- p>:</c-> <c- m>300</c-><c- l>px</c-> <c- p>}</c->
<c- n>@media</c-> <c- p>(</c->min-width<c- f>: 32em) </c-><c- p>{</c-> img { width: 500px; height:300px } }
@media (min-width: 45em) { img { width: 700px; height:400px } }</code></pre>

    </div>

    <div class=example>

     <p>This example combines <a href=#art-direction id=introduction-3:art-direction-4>art direction</a>- and <a href=#device-pixel-ratio id=introduction-3:device-pixel-ratio-3>device-pixel-ratio</a>-based
     selection. A banner that takes half the <a id=introduction-3:viewport-13 href=https://drafts.csswg.org/css2/#viewport data-x-internal=viewport>viewport</a> is provided in two versions,
     one for wide screens and one for narrow screens.</p>

<pre><code class='html'><c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>picture</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>source</c-> <c- e>media</c-><c- o>=</c-><c- s>&quot;(max-width: 500px)&quot;</c-> <c- e>srcset</c-><c- o>=</c-><c- s>&quot;banner-phone.jpeg, banner-phone-HD.jpeg 2x&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;banner.jpeg&quot;</c-> <c- e>srcset</c-><c- o>=</c-><c- s>&quot;banner-HD.jpeg 2x&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;The Breakfast Combo&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>picture</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c-></code></pre>

    </div>
   <dt><a href=#image-format-based-selection id=introduction-3:image-format-based-selection>Image format-based selection</a><dd>
    <p>The <code id=introduction-3:attr-source-type><a href=embedded-content.html#attr-source-type>type</a></code> attribute on the <code id=introduction-3:the-source-element-3><a href=embedded-content.html#the-source-element>source</a></code> element
    can be used to provide multiple images in different formats.</p>

    <div class=example>

<pre><code class='html'><c- p>&lt;</c-><c- f>h2</c-><c- p>&gt;</c->From today&apos;s featured article<c- p>&lt;/</c-><c- f>h2</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>picture</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>source</c-> <c- e>srcset</c-><c- o>=</c-><c- s>&quot;/uploads/100-marie-lloyd.webp&quot;</c-> <strong><c- e>type</c-><c- o>=</c-><c- s>&quot;image/webp&quot;</c-></strong><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>source</c-> <c- e>srcset</c-><c- o>=</c-><c- s>&quot;/uploads/100-marie-lloyd.jxr&quot;</c-> <strong><c- e>type</c-><c- o>=</c-><c- s>&quot;image/vnd.ms-photo&quot;</c-></strong><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;/uploads/100-marie-lloyd.jpg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;&quot;</c-> <c- e>width</c-><c- o>=</c-><c- s>&quot;100&quot;</c-> <c- e>height</c-><c- o>=</c-><c- s>&quot;150&quot;</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>picture</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>b</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/wiki/Marie_Lloyd&quot;</c-><c- p>&gt;</c->Marie Lloyd<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;&lt;/</c-><c- f>b</c-><c- p>&gt;</c-> (1870–1922)
was an English <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/wiki/Music_hall&quot;</c-><c- p>&gt;</c->music hall<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-> singer, ...</code></pre>

     <p>In this example, the user agent will choose the first source that has a <code id=introduction-3:attr-source-type-2><a href=embedded-content.html#attr-source-type>type</a></code> attribute with a supported MIME type. If the user agent
     supports WebP images, the first <code id=introduction-3:the-source-element-4><a href=embedded-content.html#the-source-element>source</a></code> element will be chosen. If not, but the
     user agent does support JPEG XR images, the second <code id=introduction-3:the-source-element-5><a href=embedded-content.html#the-source-element>source</a></code> element will be chosen.
     If neither of those formats are supported, the <code id=introduction-3:the-img-element-5><a href=embedded-content.html#the-img-element>img</a></code> element will be chosen.</p>

    </div>
   </dl>


  <h6 id=adaptive-images><span class=secno>4.8.4.1.1</span> Adaptive images<a href=#adaptive-images class=self-link></a></h6>

  

  <p>CSS and media queries can be used to construct graphical page layouts that adapt dynamically to
  the user's environment, in particular to different <a id=adaptive-images:viewport href=https://drafts.csswg.org/css2/#viewport data-x-internal=viewport>viewport</a> dimensions and pixel
  densities. For content, however, CSS does not help; instead, we have the <code id=adaptive-images:the-img-element><a href=embedded-content.html#the-img-element>img</a></code> element's
  <code id=adaptive-images:attr-img-srcset><a href=embedded-content.html#attr-img-srcset>srcset</a></code> attribute and the <code id=adaptive-images:the-picture-element><a href=embedded-content.html#the-picture-element>picture</a></code> element.
  This section walks through a sample case showing how to use these features.</p>

  <p>Consider a situation where on wide screens (wider than 600 <a href=https://drafts.csswg.org/css-values/#px id="adaptive-images:'px'" data-x-internal="'px'">CSS
  pixels</a>) a 300×150 image named <code>a-rectangle.png</code> is to be used,
  but on smaller screens (600 <a href=https://drafts.csswg.org/css-values/#px id="adaptive-images:'px'-2" data-x-internal="'px'">CSS pixels</a> and less), a smaller
  100×100 image called <code>a-square.png</code> is to be used. The markup for this
  would look like this:</p>

  <pre><code class='html'><c- p>&lt;</c-><c- f>figure</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>picture</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>source</c-> <c- e>srcset</c-><c- o>=</c-><c- s>&quot;a-square.png&quot;</c-> <c- e>media</c-><c- o>=</c-><c- s>&quot;(max-width: 600px)&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;a-rectangle.png&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;Barney Frank wears a suit and glasses.&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>picture</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>figcaption</c-><c- p>&gt;</c->Barney Frank, 2011<c- p>&lt;/</c-><c- f>figcaption</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>figure</c-><c- p>&gt;</c-></code></pre>

  <p class=note>For details on what to put in the <code id=adaptive-images:attr-img-alt><a href=embedded-content.html#attr-img-alt>alt</a></code>
  attribute, see the <a href=#alt>Requirements for providing text to act as an alternative for
  images</a> section.</p>

  <p>The problem with this is that the user agent does not necessarily know what dimensions to use
  for the image when the image is loading. To avoid the layout having to be reflowed multiple times
  as the page is loading, CSS and CSS media queries can be used to provide the dimensions:</p>

  <pre><code class='html'><c- p>&lt;</c-><c- f>style</c-><c- p>&gt;</c->
 <c- p>#</c-><c- nn>a</c-> <c- p>{</c-> <c- k>width</c-><c- p>:</c-> <c- mi>300</c-><c- b>px</c-><c- p>;</c-> <c- k>height</c-><c- p>:</c-> <c- mi>150</c-><c- b>px</c-><c- p>;</c-> <c- p>}</c->
 <c- p>@</c-><c- k>media</c-> <c- o>(</c-><c- f>max-width</c-><c- o>:</c-> <c- f>600px</c-><c- o>)</c-> <c- p>{</c-> <c- p>#</c-><c- nn>a</c-> <c- p>{</c-> <c- k>width</c-><c- p>:</c-> <c- mi>100</c-><c- b>px</c-><c- p>;</c-> <c- k>height</c-><c- p>:</c-> <c- mi>100</c-><c- b>px</c-><c- p>;</c-> <c- p>}</c-> <c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>figure</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>picture</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>source</c-> <c- e>srcset</c-><c- o>=</c-><c- s>&quot;a-square.png&quot;</c-> <c- e>media</c-><c- o>=</c-><c- s>&quot;(max-width: 600px)&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;a-rectangle.png&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;Barney Frank wears a suit and glasses.&quot;</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;a&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>picture</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>figcaption</c-><c- p>&gt;</c->Barney Frank, 2011<c- p>&lt;/</c-><c- f>figcaption</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>figure</c-><c- p>&gt;</c-></code></pre>

  <p>Alternatively, the <code id=adaptive-images:attr-dim-width><a href=embedded-content-other.html#attr-dim-width>width</a></code> and <code id=adaptive-images:attr-dim-height><a href=embedded-content-other.html#attr-dim-height>height</a></code> attributes can be used on the <code id=adaptive-images:the-source-element><a href=embedded-content.html#the-source-element>source</a></code> and
  <code id=adaptive-images:the-img-element-2><a href=embedded-content.html#the-img-element>img</a></code> elements to provide the width and height:</p>

  <pre><code class='html'><c- p>&lt;</c-><c- f>figure</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>picture</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>source</c-> <c- e>srcset</c-><c- o>=</c-><c- s>&quot;a-square.png&quot;</c-> <c- e>media</c-><c- o>=</c-><c- s>&quot;(max-width: 600px)&quot;</c-> <c- e>width</c-><c- o>=</c-><c- s>&quot;100&quot;</c-> <c- e>height</c-><c- o>=</c-><c- s>&quot;100&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;a-rectangle.png&quot;</c-> <c- e>width</c-><c- o>=</c-><c- s>&quot;300&quot;</c-> <c- e>height</c-><c- o>=</c-><c- s>&quot;150&quot;</c->
  <c- e>alt</c-><c- o>=</c-><c- s>&quot;Barney Frank wears a suit and glasses.&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>picture</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>figcaption</c-><c- p>&gt;</c->Barney Frank, 2011<c- p>&lt;/</c-><c- f>figcaption</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>figure</c-><c- p>&gt;</c->
</code></pre>

  <hr>

  <p>The <code id=adaptive-images:the-img-element-3><a href=embedded-content.html#the-img-element>img</a></code> element is used with the <code id=adaptive-images:attr-img-src><a href=embedded-content.html#attr-img-src>src</a></code> attribute,
  which gives the URL of the image to use for legacy user agents that do not support the
  <code id=adaptive-images:the-picture-element-2><a href=embedded-content.html#the-picture-element>picture</a></code> element. This leads to a question of which image to provide in the <code id=adaptive-images:attr-img-src-2><a href=embedded-content.html#attr-img-src>src</a></code> attribute.</p>

  <p>If the author wants the biggest image in legacy user agents, the markup could be as
  follows:</p>

  <pre><code class='html'><c- p>&lt;</c-><c- f>picture</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>source</c-> <c- e>srcset</c-><c- o>=</c-><c- s>&quot;pear-mobile.jpeg&quot;</c-> <c- e>media</c-><c- o>=</c-><c- s>&quot;(max-width: 720px)&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>source</c-> <c- e>srcset</c-><c- o>=</c-><c- s>&quot;pear-tablet.jpeg&quot;</c-> <c- e>media</c-><c- o>=</c-><c- s>&quot;(max-width: 1280px)&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;pear-desktop.jpeg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;The pear is juicy.&quot;</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>picture</c-><c- p>&gt;</c-></code></pre>

  <p>However, if legacy mobile user agents are more important, one can list all three images in the
  <code id=adaptive-images:the-source-element-2><a href=embedded-content.html#the-source-element>source</a></code> elements, overriding the <code id=adaptive-images:attr-img-src-3><a href=embedded-content.html#attr-img-src>src</a></code> attribute
  entirely.</p>

  <pre><code class='html'><c- p>&lt;</c-><c- f>picture</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>source</c-> <c- e>srcset</c-><c- o>=</c-><c- s>&quot;pear-mobile.jpeg&quot;</c-> <c- e>media</c-><c- o>=</c-><c- s>&quot;(max-width: 720px)&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>source</c-> <c- e>srcset</c-><c- o>=</c-><c- s>&quot;pear-tablet.jpeg&quot;</c-> <c- e>media</c-><c- o>=</c-><c- s>&quot;(max-width: 1280px)&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>source</c-> <c- e>srcset</c-><c- o>=</c-><c- s>&quot;pear-desktop.jpeg&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;pear-mobile.jpeg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;The pear is juicy.&quot;</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>picture</c-><c- p>&gt;</c-></code></pre>

  <p>Since at this point the <code id=adaptive-images:attr-img-src-4><a href=embedded-content.html#attr-img-src>src</a></code> attribute is actually being
  ignored entirely by <code id=adaptive-images:the-picture-element-3><a href=embedded-content.html#the-picture-element>picture</a></code>-supporting user agents, the <code id=adaptive-images:attr-img-src-5><a href=embedded-content.html#attr-img-src>src</a></code> attribute can default to any image, including one that is neither
  the smallest nor biggest:</p>

  <pre><code class='html'><c- p>&lt;</c-><c- f>picture</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>source</c-> <c- e>srcset</c-><c- o>=</c-><c- s>&quot;pear-mobile.jpeg&quot;</c-> <c- e>media</c-><c- o>=</c-><c- s>&quot;(max-width: 720px)&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>source</c-> <c- e>srcset</c-><c- o>=</c-><c- s>&quot;pear-tablet.jpeg&quot;</c-> <c- e>media</c-><c- o>=</c-><c- s>&quot;(max-width: 1280px)&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>source</c-> <c- e>srcset</c-><c- o>=</c-><c- s>&quot;pear-desktop.jpeg&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;pear-tablet.jpeg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;The pear is juicy.&quot;</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>picture</c-><c- p>&gt;</c-></code></pre>

  <hr>

  <p>Above the <code>max-width</code> media feature is used, giving the maximum
  (<a id=adaptive-images:viewport-2 href=https://drafts.csswg.org/css2/#viewport data-x-internal=viewport>viewport</a>) dimensions that an image is intended for. It is also possible to use <code>min-width</code> instead.</p>

  <pre><code class='html'><c- p>&lt;</c-><c- f>picture</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>source</c-> <c- e>srcset</c-><c- o>=</c-><c- s>&quot;pear-desktop.jpeg&quot;</c-> <c- e>media</c-><c- o>=</c-><c- s>&quot;(min-width: 1281px)&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>source</c-> <c- e>srcset</c-><c- o>=</c-><c- s>&quot;pear-tablet.jpeg&quot;</c-> <c- e>media</c-><c- o>=</c-><c- s>&quot;(min-width: 721px)&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;pear-mobile.jpeg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;The pear is juicy.&quot;</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>picture</c-><c- p>&gt;</c-></code></pre>


  <h5 id=attributes-common-to-source-and-img-elements><span class=secno>4.8.4.2</span> Attributes common to <code id=attributes-common-to-source-and-img-elements:the-source-element><a href=embedded-content.html#the-source-element>source</a></code>,
  <code id=attributes-common-to-source-and-img-elements:the-img-element><a href=embedded-content.html#the-img-element>img</a></code>, and <code id=attributes-common-to-source-and-img-elements:the-link-element><a href=semantics.html#the-link-element>link</a></code> elements<a href=#attributes-common-to-source-and-img-elements class=self-link></a></h5>

  <h6 id=srcset-attributes><span class=secno>4.8.4.2.1</span> Srcset attributes<a href=#srcset-attributes class=self-link></a></h6>

  <p>A <dfn id=srcset-attribute>srcset attribute</dfn> is an attribute with requirements defined in this section.</p>

  <p>If present, its value must consist of one or more <a href=#image-candidate-string id=srcset-attributes:image-candidate-string>image
  candidate strings</a>, each separated from the next by a U+002C COMMA character (,). If an
  <a href=#image-candidate-string id=srcset-attributes:image-candidate-string-2>image candidate string</a> contains no descriptors and no <a id=srcset-attributes:space-characters href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII whitespace</a>
  after the URL, the following <a href=#image-candidate-string id=srcset-attributes:image-candidate-string-3>image candidate string</a>, if there is one, must begin with
  one or more <a id=srcset-attributes:space-characters-2 href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII whitespace</a>.</p>

  <p>An <dfn id=image-candidate-string>image candidate string</dfn> consists of the following components, in order, with the
  further restrictions described below this list:</p>

  <ol><li><p>Zero or more <a id=srcset-attributes:space-characters-3 href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII whitespace</a>.<li><p>A <a id=srcset-attributes:valid-non-empty-url href=urls-and-fetching.html#valid-non-empty-url>valid non-empty URL</a> that does not start or end with a U+002C COMMA
   character (,), referencing a non-interactive, optionally animated, image resource that is neither
   paged nor scripted.<li><p>Zero or more <a id=srcset-attributes:space-characters-4 href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII whitespace</a>.<li>
    <p>Zero or one of the following:</p>

    <ul><li><p>A <dfn id=width-descriptor>width descriptor</dfn>, consisting of: <a id=srcset-attributes:space-characters-5 href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII whitespace</a>, a
     <a id=srcset-attributes:valid-non-negative-integer href=common-microsyntaxes.html#valid-non-negative-integer>valid non-negative integer</a> giving a number greater than zero representing the
     <dfn id=width-descriptor-value>width descriptor value</dfn>, and a U+0077 LATIN SMALL LETTER W character.<li><p>A <dfn id=pixel-density-descriptor>pixel density descriptor</dfn>, consisting of: <a id=srcset-attributes:space-characters-6 href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII whitespace</a>, a
     <a id=srcset-attributes:valid-floating-point-number href=common-microsyntaxes.html#valid-floating-point-number>valid floating-point number</a> giving a number greater than zero representing the
     <dfn id=pixel-density-descriptor-value>pixel density descriptor value</dfn>, and a U+0078 LATIN SMALL LETTER X
     character.</ul>
   <li><p>Zero or more <a id=srcset-attributes:space-characters-7 href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII whitespace</a>.</ol>

  <p>There must not be an <a href=#image-candidate-string id=srcset-attributes:image-candidate-string-4>image candidate string</a> for an element that has the same
  <a href=#width-descriptor-value id=srcset-attributes:width-descriptor-value>width descriptor value</a> as another <a href=#image-candidate-string id=srcset-attributes:image-candidate-string-5>image candidate string</a>'s <a href=#width-descriptor-value id=srcset-attributes:width-descriptor-value-2>width
  descriptor value</a> for the same element.</p>

  <p>There must not be an <a href=#image-candidate-string id=srcset-attributes:image-candidate-string-6>image candidate string</a> for an element that has the same
  <a href=#pixel-density-descriptor-value id=srcset-attributes:pixel-density-descriptor-value>pixel density descriptor value</a> as another <a href=#image-candidate-string id=srcset-attributes:image-candidate-string-7>image candidate string</a>'s
  <a href=#pixel-density-descriptor-value id=srcset-attributes:pixel-density-descriptor-value-2>pixel density descriptor value</a> for the same element. For the purpose of this
  requirement, an <a href=#image-candidate-string id=srcset-attributes:image-candidate-string-8>image candidate string</a> with no descriptors is equivalent to an
  <a href=#image-candidate-string id=srcset-attributes:image-candidate-string-9>image candidate string</a> with a <code>1x</code> descriptor.</p>

  <p>If an <a href=#image-candidate-string id=srcset-attributes:image-candidate-string-10>image candidate string</a> for an element has the <a href=#width-descriptor id=srcset-attributes:width-descriptor>width descriptor</a>
  specified, all other <a href=#image-candidate-string id=srcset-attributes:image-candidate-string-11>image candidate strings</a> for that
  element must also have the <a href=#width-descriptor id=srcset-attributes:width-descriptor-2>width descriptor</a> specified.</p>

  <p>The specified width in an <a href=#image-candidate-string id=srcset-attributes:image-candidate-string-12>image candidate string</a>'s <a href=#width-descriptor id=srcset-attributes:width-descriptor-3>width descriptor</a>
  must match the <a id=srcset-attributes:natural-width href=https://drafts.csswg.org/css-images/#natural-width data-x-internal=natural-width>natural width</a> in the resource given by the
  <a href=#image-candidate-string id=srcset-attributes:image-candidate-string-13>image candidate string</a>'s URL, if it has a <a id=srcset-attributes:natural-width-2 href=https://drafts.csswg.org/css-images/#natural-width data-x-internal=natural-width>natural width</a>.</p>

  <p>If an element has a <a href=#sizes-attribute id=srcset-attributes:sizes-attribute>sizes attribute</a> present, all <a href=#image-candidate-string id=srcset-attributes:image-candidate-string-14>image candidate strings</a> for that element must have the <a href=#width-descriptor id=srcset-attributes:width-descriptor-4>width
  descriptor</a> specified.</p>


  <h6 id=sizes-attributes><span class=secno>4.8.4.2.2</span> Sizes attributes<a href=#sizes-attributes class=self-link></a></h6>

  <p>A <dfn id=sizes-attribute>sizes attribute</dfn> is an attribute with requirements defined in this section.</p>

  <p>If present, the value must be a <a href=#valid-source-size-list id=sizes-attributes:valid-source-size-list>valid source size list</a>.</p>

  <p>A <dfn id=valid-source-size-list>valid source size list</dfn> is a string that matches the following grammar:
  <a href=references.html#refsCSSVALUES>[CSSVALUES]</a> <a href=references.html#refsMQ>[MQ]</a></p>

<pre><code class='html'><dfn id='source-size-list' data-dfn-type='type'><c- p>&lt;</c-><c- f>source-size-list</c-><c- p>&gt;</c-></dfn> = <a href='#source-size' id='sizes-attributes:source-size'><c- p>&lt;</c-><c- f>source-size</c-><c- p>&gt;</c-></a>#? , <a href='#source-size-value' id='sizes-attributes:source-size-value'><c- p>&lt;</c-><c- f>source-size-value</c-><c- p>&gt;</c-></a>
<dfn id='source-size' data-dfn-type='type'><c- p>&lt;</c-><c- f>source-size</c-><c- p>&gt;</c-></dfn> = <a id='sizes-attributes:media-condition' href='https://drafts.csswg.org/mediaqueries/#typedef-media-condition' data-x-internal='media-condition'><c- p>&lt;</c-><c- f>media-condition</c-><c- p>&gt;</c-></a> <a href='#source-size-value' id='sizes-attributes:source-size-value-2'><c- p>&lt;</c-><c- f>source-size-value</c-><c- p>&gt;</c-></a> | <a href='#valdef-sizes-auto' id='sizes-attributes:valdef-sizes-auto'>auto</a>
<dfn id='source-size-value' data-dfn-type='type'><c- p>&lt;</c-><c- f>source-size-value</c-><c- p>&gt;</c-></dfn> = <a id='sizes-attributes:length-2' href='https://drafts.csswg.org/css-values/#lengths' data-x-internal='length-2'><c- p>&lt;</c-><c- f>length</c-><c- p>&gt;</c-></a> | <a href='#valdef-sizes-auto' id='sizes-attributes:valdef-sizes-auto-2'>auto</a></code></pre>

  <p>A <a href=#source-size-value id=sizes-attributes:source-size-value-3>&lt;source-size-value></a> that is a <a id=sizes-attributes:length-2-2 href=https://drafts.csswg.org/css-values/#lengths data-x-internal=length-2>&lt;length></a> must not be negative,
  and must not use CSS functions other than the <a id=sizes-attributes:math-functions href=https://drafts.csswg.org/css-values/#math-function data-x-internal=math-functions>math functions</a>.</p>

  <p>The keyword <dfn id=valdef-sizes-auto><code>auto</code></dfn> is a width that is
  computed in <span>parse a sizes attribute</span>. If present, it must be the first entry and the
  entire <a href=#source-size-list id=sizes-attributes:source-size-list>&lt;source-size-list></a> value must either be the string "<code>auto</code>" (<a id=sizes-attributes:ascii-case-insensitive href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a>) or start with the string "<code>auto,</code>" (<a id=sizes-attributes:ascii-case-insensitive-2 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a>).</p>

  <p class=note>If the <code id=sizes-attributes:the-img-element><a href=embedded-content.html#the-img-element>img</a></code> element that initiated the image loading (with the
  <span>update the image data</span> or <span>react to environment
  changes</span> algorithms) <a id=sizes-attributes:allows-auto-sizes href=embedded-content.html#allows-auto-sizes>allows auto-sizes</a> and is <span>being rendered</span>,
  then <code id=sizes-attributes:valdef-sizes-auto-3><a href=#valdef-sizes-auto>auto</a></code> is the <a id=sizes-attributes:concrete-object-size href=https://drafts.csswg.org/css-images/#concrete-object-size data-x-internal=concrete-object-size>concrete object size</a> width.
  Otherwise, the <code id=sizes-attributes:valdef-sizes-auto-4><a href=#valdef-sizes-auto>auto</a></code> value is ignored and the next
  <span>source size</span> is used instead, if any.</p>

  <p>The <code id=sizes-attributes:valdef-sizes-auto-5><a href=#valdef-sizes-auto>auto</a></code> keyword may be specified in the <code id=sizes-attributes:attr-source-sizes><a href=embedded-content.html#attr-source-sizes>sizes</a></code> attribute of <code id=sizes-attributes:the-source-element><a href=embedded-content.html#the-source-element>source</a></code> elements and <code id=sizes-attributes:attr-img-sizes><a href=embedded-content.html#attr-img-sizes>sizes</a></code> attribute of <code id=sizes-attributes:the-img-element-2><a href=embedded-content.html#the-img-element>img</a></code> elements, if the following
  conditions are met. Otherwise, <code id=sizes-attributes:valdef-sizes-auto-6><a href=#valdef-sizes-auto>auto</a></code> must not be
  specified.</p>

  <ul><li><p>The element is a <code id=sizes-attributes:the-source-element-2><a href=embedded-content.html#the-source-element>source</a></code> element with a following sibling
   <code id=sizes-attributes:the-img-element-3><a href=embedded-content.html#the-img-element>img</a></code> element.<li><p>The element is an <code id=sizes-attributes:the-img-element-4><a href=embedded-content.html#the-img-element>img</a></code> element.<li><p>The <code id=sizes-attributes:the-img-element-5><a href=embedded-content.html#the-img-element>img</a></code> element referenced in either condition above <a id=sizes-attributes:allows-auto-sizes-2 href=embedded-content.html#allows-auto-sizes>allows
   auto-sizes</a>.</ul>

  <p class=note>In addition, it is strongly encouraged to specify dimensions using the <code id=sizes-attributes:attr-dim-width><a href=embedded-content-other.html#attr-dim-width>width</a></code> and <code id=sizes-attributes:attr-dim-height><a href=embedded-content-other.html#attr-dim-height>height</a></code> attributes
  or with CSS. Without specified dimensions, the image will likely render with 300x150 dimensions
  because <code>sizes="auto"</code> implies <code>contain-intrinsic-size: 300px
  150px</code> in <a href=#img-contain-size>the Rendering section</a>.</p>

  <p>The <a href=#source-size-value id=sizes-attributes:source-size-value-4>&lt;source-size-value></a> gives the intended layout width of the image. The
  author can specify different widths for different environments with
  <a id=sizes-attributes:media-condition-2 href=https://drafts.csswg.org/mediaqueries/#typedef-media-condition data-x-internal=media-condition>&lt;media-condition></a>s.</p>

  <p class=note>Percentages are not allowed in a <a href=#source-size-value id=sizes-attributes:source-size-value-5>&lt;source-size-value></a>,
  to avoid confusion about what it would be relative to.
  The <a id="sizes-attributes:'vw'" href=https://drafts.csswg.org/css-values/#vw data-x-internal="'vw'">'vw'</a> unit can be used for sizes relative to the <a id=sizes-attributes:viewport href=https://drafts.csswg.org/css2/#viewport data-x-internal=viewport>viewport</a>
  width.</p>

  


  <h5 id=alt><span class=secno>4.8.4.3</span> Requirements for providing text to act as an alternative for images<a href=#alt class=self-link></a></h5>


  <h6 id=general-guidelines><span class=secno>4.8.4.3.1</span> General guidelines<a href=#general-guidelines class=self-link></a></h6>

  <p>Except where otherwise specified, the <code id=general-guidelines:attr-img-alt><a href=embedded-content.html#attr-img-alt>alt</a></code> attribute must be
  specified and its value must not be empty; the value must be an appropriate replacement for the
  image. The specific requirements for the <code id=general-guidelines:attr-img-alt-2><a href=embedded-content.html#attr-img-alt>alt</a></code> attribute depend on
  what the image is intended to represent, as described in the following sections.</p>

  <p>The most general rule to consider when writing alternative text is the following: <strong>the
  intent is that replacing every image with the text of its <code id=general-guidelines:attr-img-alt-3><a href=embedded-content.html#attr-img-alt>alt</a></code>
  attribute does not change the meaning of the page</strong>.</p>

  <p>So, in general, alternative text can be written by considering what one would have written had
  one not been able to include the image.</p>

  <p>A corollary to this is that the <code id=general-guidelines:attr-img-alt-4><a href=embedded-content.html#attr-img-alt>alt</a></code> attribute's value should
  never contain text that could be considered the image's <em>caption</em>, <em>title</em>, or
  <em>legend</em>. It is supposed to contain replacement text that could be used by users
  <em>instead</em> of the image; it is not meant to supplement the image. The <code id=general-guidelines:attr-title><a href=dom.html#attr-title>title</a></code> attribute can be used for supplemental information.</p>

  <p>Another corollary is that the <code id=general-guidelines:attr-img-alt-5><a href=embedded-content.html#attr-img-alt>alt</a></code> attribute's value should
  not repeat information that is already provided in the prose next to the image.</p>

  <p class=note>One way to think of alternative text is to think about how you would read the page
  containing the image to someone over the phone, without mentioning that there is an image present.
  Whatever you say instead of the image is typically a good start for writing the alternative
  text.</p>


  <h6 id=a-link-or-button-containing-nothing-but-the-image><span class=secno>4.8.4.3.2</span> A link or button containing nothing but the image<a href=#a-link-or-button-containing-nothing-but-the-image class=self-link></a></h6>

  <p>When an <code id=a-link-or-button-containing-nothing-but-the-image:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code> element that creates a <a id=a-link-or-button-containing-nothing-but-the-image:hyperlink href=links.html#hyperlink>hyperlink</a>, or a <code id=a-link-or-button-containing-nothing-but-the-image:the-button-element><a href=form-elements.html#the-button-element>button</a></code>
  element, has no textual content but contains one or more images, the <code id=a-link-or-button-containing-nothing-but-the-image:attr-img-alt><a href=embedded-content.html#attr-img-alt>alt</a></code> attributes must contain text that together convey the purpose of
  the link or button.</p>

  <div class=example>

   <p>In this example, a user is asked to pick their preferred color from a list of three. Each color
   is given by an image, but for users who have configured their user agent not to display images,
   the color names are used instead:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->Pick your color<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>ul</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;green.html&quot;</c-><c- p>&gt;</c-><strong><c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;green.jpeg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;Green&quot;</c-><c- p>&gt;</c-></strong><c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;blue.html&quot;</c-><c- p>&gt;</c-><strong><c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;blue.jpeg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;Blue&quot;</c-><c- p>&gt;</c-></strong><c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;red.html&quot;</c-><c- p>&gt;</c-><strong><c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;red.jpeg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;Red&quot;</c-><c- p>&gt;</c-></strong><c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>ul</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>In this example, each button has a set of images to indicate the kind of color output desired
   by the user. The first image is used in each case to give the alternative text.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>button</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;rgb&quot;</c-><c- p>&gt;</c-><strong><c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;red&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;RGB&quot;</c-><c- p>&gt;&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;green&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;&quot;</c-><c- p>&gt;&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;blue&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;&quot;</c-><c- p>&gt;</c-></strong><c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>button</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;cmyk&quot;</c-><c- p>&gt;</c-><strong><c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;cyan&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;CMYK&quot;</c-><c- p>&gt;&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;magenta&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;&quot;</c-><c- p>&gt;&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;yellow&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;&quot;</c-><c- p>&gt;&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;black&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;&quot;</c-><c- p>&gt;</c-></strong><c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c-></code></pre>

   <p>Since each image represents one part of the text, it could also be written like this:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>button</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;rgb&quot;</c-><c- p>&gt;</c-><strong><c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;red&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;R&quot;</c-><c- p>&gt;&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;green&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;G&quot;</c-><c- p>&gt;&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;blue&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;B&quot;</c-><c- p>&gt;</c-></strong><c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>button</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;cmyk&quot;</c-><c- p>&gt;</c-><strong><c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;cyan&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;C&quot;</c-><c- p>&gt;&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;magenta&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;M&quot;</c-><c- p>&gt;&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;yellow&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;Y&quot;</c-><c- p>&gt;&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;black&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;K&quot;</c-><c- p>&gt;</c-></strong><c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c-></code></pre>

   <p>However, with other alternative text, this might not work, and putting all the alternative
   text into one image in each case might make more sense:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>button</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;rgb&quot;</c-><c- p>&gt;</c-><strong><c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;red&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;sRGB profile&quot;</c-><c- p>&gt;&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;green&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;&quot;</c-><c- p>&gt;&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;blue&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;&quot;</c-><c- p>&gt;</c-></strong><c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>button</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;cmyk&quot;</c-><c- p>&gt;</c-><strong><c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;cyan&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;CMYK profile&quot;</c-><c- p>&gt;&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;magenta&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;&quot;</c-><c- p>&gt;&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;yellow&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;&quot;</c-><c- p>&gt;&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;black&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;&quot;</c-><c- p>&gt;</c-></strong><c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c-></code></pre>

  </div>



  <h6 id=a-phrase-or-paragraph-with-an-alternative-graphical-representation:-charts,-diagrams,-graphs,-maps,-illustrations><span class=secno>4.8.4.3.3</span> A phrase or paragraph with an alternative graphical representation: charts, diagrams, graphs, maps, illustrations<a href=#a-phrase-or-paragraph-with-an-alternative-graphical-representation:-charts,-diagrams,-graphs,-maps,-illustrations class=self-link></a></h6>

  <p>Sometimes something can be more clearly stated in graphical form, for example as a flowchart, a
  diagram, a graph, or a simple map showing directions. In such cases, an image can be given using
  the <code id=a-phrase-or-paragraph-with-an-alternative-graphical-representation:-charts,-diagrams,-graphs,-maps,-illustrations:the-img-element><a href=embedded-content.html#the-img-element>img</a></code> element, but the lesser textual version must still be given, so that users
  who are unable to view the image (e.g. because they have a very slow connection, or because they
  are using a text-only browser, or because they are listening to the page being read out by a
  hands-free automobile voice web browser, or simply because they are blind) are still able to
  understand the message being conveyed.</p>

  <p>The text must be given in the <code id=a-phrase-or-paragraph-with-an-alternative-graphical-representation:-charts,-diagrams,-graphs,-maps,-illustrations:attr-img-alt><a href=embedded-content.html#attr-img-alt>alt</a></code> attribute, and must convey
  the same message as the image specified in the <code id=a-phrase-or-paragraph-with-an-alternative-graphical-representation:-charts,-diagrams,-graphs,-maps,-illustrations:attr-img-src><a href=embedded-content.html#attr-img-src>src</a></code>
  attribute.</p>

  <p>It is important to realize that the alternative text is a <em>replacement</em> for the image,
  not a description of the image.</p>

  <div class=example>

   <p>In the following example we have <a href=../images/parsing-model-overview.svg>a flowchart</a>
   in image form, with text in the <code id=a-phrase-or-paragraph-with-an-alternative-graphical-representation:-charts,-diagrams,-graphs,-maps,-illustrations:attr-img-alt-2><a href=embedded-content.html#attr-img-alt>alt</a></code> attribute rephrasing the
   flowchart in prose form:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->In the common case, the data handled by the tokenization stage
comes from the network, but it can also come from script.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-><strong><c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;images/parsing-model-overview.svg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;The Network</c->
<c- s>passes data to the Input Stream Preprocessor, which passes it to the</c->
<c- s>Tokenizer, which passes it to the Tree Construction stage. From there,</c->
<c- s>data goes to both the DOM and to Script Execution. Script Execution is</c->
<c- s>linked to the DOM, and, using document.write(), passes data to the</c->
<c- s>Tokenizer.&quot;</c-><c- p>&gt;</c-></strong><c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>Here's another example, showing a good solution and a bad solution to the problem of including
   an image in a description.</p>

   <p>First, here's the good solution. This sample shows how the alternative text should just be
   what you would have put in the prose if the image had never existed.</p>

   <pre><code class='html'><c- c>&lt;!-- This is the correct way to do things. --&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->
 You are standing in an open field west of a house.
 <strong><c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;house.jpeg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;The house is white, with a boarded front door.&quot;</c-><c- p>&gt;</c-></strong>
 There is a small mailbox here.
<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <p>Second, here's the bad solution. In this incorrect way of doing things, the alternative text
   is simply a description of the image, instead of a textual replacement for the image. It's bad
   because when the image isn't shown, the text doesn't flow as well as in the first example.</p>

   <pre class=bad><code class='html'><c- c>&lt;!-- </c-><em><c- c>This is the wrong way to do things.</c-></em><c- c> --&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->
 You are standing in an open field west of a house.
 <c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;house.jpeg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;A white house, with a boarded front door.&quot;</c-><c- p>&gt;</c->
 There is a small mailbox here.
<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <p>Text such as "Photo of white house with boarded door" would be equally bad alternative text
   (though it could be suitable for the <code id=a-phrase-or-paragraph-with-an-alternative-graphical-representation:-charts,-diagrams,-graphs,-maps,-illustrations:attr-title><a href=dom.html#attr-title>title</a></code> attribute or in the
   <code id=a-phrase-or-paragraph-with-an-alternative-graphical-representation:-charts,-diagrams,-graphs,-maps,-illustrations:the-figcaption-element><a href=grouping-content.html#the-figcaption-element>figcaption</a></code> element of a <code id=a-phrase-or-paragraph-with-an-alternative-graphical-representation:-charts,-diagrams,-graphs,-maps,-illustrations:the-figure-element><a href=grouping-content.html#the-figure-element>figure</a></code> with this image).</p>

  </div>


  <h6 id=a-short-phrase-or-label-with-an-alternative-graphical-representation:-icons,-logos><span class=secno>4.8.4.3.4</span> A short phrase or label with an alternative graphical representation: icons, logos<a href=#a-short-phrase-or-label-with-an-alternative-graphical-representation:-icons,-logos class=self-link></a></h6>

  <p>A document can contain information in iconic form. The icon is intended to help users of visual
  browsers to recognize features at a glance.</p>

  <p>In some cases, the icon is supplemental to a text label conveying the same meaning. In those
  cases, the <code id=a-short-phrase-or-label-with-an-alternative-graphical-representation:-icons,-logos:attr-img-alt><a href=embedded-content.html#attr-img-alt>alt</a></code> attribute must be present but must be empty.</p>

  <div class=example>

   <p>Here the icons are next to text that conveys the same meaning, so they have an empty <code id=a-short-phrase-or-label-with-an-alternative-graphical-representation:-icons,-logos:attr-img-alt-2><a href=embedded-content.html#attr-img-alt>alt</a></code> attribute:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>nav</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/help/&quot;</c-><c- p>&gt;</c-><strong><c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;/icons/help.png&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;&quot;</c-><c- p>&gt;</c-></strong> Help<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/configure/&quot;</c-><c- p>&gt;</c-><strong><c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;/icons/configuration.png&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;&quot;</c-><c- p>&gt;</c-></strong>
 Configuration Tools<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>nav</c-><c- p>&gt;</c-></code></pre>

  </div>

  <p>In other cases, the icon has no text next to it describing what it means; the icon is supposed
  to be self-explanatory. In those cases, an equivalent textual label must be given in the <code id=a-short-phrase-or-label-with-an-alternative-graphical-representation:-icons,-logos:attr-img-alt-3><a href=embedded-content.html#attr-img-alt>alt</a></code> attribute.</p>

  <div class=example>

   <p>Here, posts on a news site are labeled with an icon indicating their topic.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>body</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>article</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>header</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->Ratatouille wins <c- p>&lt;</c-><c- f>i</c-><c- p>&gt;</c->Best Movie of the Year<c- p>&lt;/</c-><c- f>i</c-><c- p>&gt;</c-> award<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-><strong><c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;movies.png&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;Movies&quot;</c-><c- p>&gt;</c-></strong><c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>header</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Pixar has won yet another <c- p>&lt;</c-><c- f>i</c-><c- p>&gt;</c->Best Movie of the Year<c- p>&lt;/</c-><c- f>i</c-><c- p>&gt;</c-> award,
  making this its 8th win in the last 12 years.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>article</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>article</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>header</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->Latest TWiT episode is online<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-><strong><c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;podcasts.png&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;Podcasts&quot;</c-><c- p>&gt;</c-></strong><c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>header</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->The latest TWiT episode has been posted, in which we hear
  several tech news stories as well as learning much more about the
  iPhone. This week, the panelists compare how reflective their
  iPhones&apos; Apple logos are.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>article</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>body</c-><c- p>&gt;</c-></code></pre>

  </div>

  <p>Many pages include logos, insignia, flags, or emblems, which stand for a particular entity such
  as a company, organization, project, band, software package, country, or some such.</p>

  <p>If the logo is being used to represent the entity, e.g. as a page heading, the <code id=a-short-phrase-or-label-with-an-alternative-graphical-representation:-icons,-logos:attr-img-alt-4><a href=embedded-content.html#attr-img-alt>alt</a></code> attribute must contain the name of the entity being represented by
  the logo. The <code id=a-short-phrase-or-label-with-an-alternative-graphical-representation:-icons,-logos:attr-img-alt-5><a href=embedded-content.html#attr-img-alt>alt</a></code> attribute must <em>not</em> contain text like
  the word "logo", as it is not the fact that it is a logo that is being conveyed, it's the entity
  itself.</p>

  <p>If the logo is being used next to the name of the entity that it represents, then the logo is
  supplemental, and its <code id=a-short-phrase-or-label-with-an-alternative-graphical-representation:-icons,-logos:attr-img-alt-6><a href=embedded-content.html#attr-img-alt>alt</a></code> attribute must instead be empty.</p>

  <p>If the logo is merely used as decorative material (as branding, or, for example, as a side
  image in an article that mentions the entity to which the logo belongs), then the entry below on
  purely decorative images applies. If the logo is actually being discussed, then it is being used
  as a phrase or paragraph (the description of the logo) with an alternative graphical
  representation (the logo itself), and the first entry above applies.</p>

  <div class=example>

   <p>In the following snippets, all four of the above cases are present. First, we see a logo used
   to represent a company:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c-><strong><c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;XYZ.gif&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;The XYZ company&quot;</c-><c- p>&gt;</c-></strong><c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c-></code></pre>

   <p>Next, we see a paragraph which uses a logo right next to the company name, and so doesn't have
   any alternative text:

   <pre><code class='html'><c- p>&lt;</c-><c- f>article</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>h2</c-><c- p>&gt;</c->News<c- p>&lt;/</c-><c- f>h2</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->We have recently been looking at buying the <strong><c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;alpha.gif&quot;</c->
 <c- e>alt</c-><c- o>=</c-><c- s>&quot;&quot;</c-><c- p>&gt;</c-> ΑΒΓ company</strong>, a small Greek company
 specializing in our type of product.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <p>In this third snippet, we have a logo being used in an aside, as part of the larger article
   discussing the acquisition:</p>

<pre><code class='html'><strong><c- p>&lt;</c-><c- f>aside</c-><c- p>&gt;&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;alpha-large.gif&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;&quot;</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;&lt;/</c-><c- f>aside</c-><c- p>&gt;</c-></strong>
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->The ΑΒΓ company has had a good quarter, and our
 pie chart studies of their accounts suggest a much bigger blue slice
 than its green and orange slices, which is always a good sign.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>article</c-><c- p>&gt;</c-></code></pre>

   <p>Finally, we have an opinion piece talking about a logo, and the logo is therefore described in
   detail in the alternative text.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Consider for a moment their logo:<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->

<strong><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;/images/logo&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;It consists of a green circle with a</c->
<c- s>green question mark centered inside it.&quot;</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></strong>

<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->How unoriginal can you get? I mean, oooooh, a question mark, how
<c- p>&lt;</c-><c- f>em</c-><c- p>&gt;</c->revolutionary<c- p>&lt;/</c-><c- f>em</c-><c- p>&gt;</c->, how utterly <c- p>&lt;</c-><c- f>em</c-><c- p>&gt;</c->ground-breaking<c- p>&lt;/</c-><c- f>em</c-><c- p>&gt;</c->, I&apos;m
sure everyone will rush to adopt those specifications now! They could
at least have tried for some sort of, I don&apos;t know, sequence of
rounded squares with varying shades of green and bold white outlines,
at least that would look good on the cover of a blue book.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <p>This example shows how the alternative text should be written such that if the image isn't <i>available</i>, and the text is used instead, the text flows seamlessly into
   the surrounding text, as if the image had never been there in the first place.</p>

  </div>


  <h6 id=text-that-has-been-rendered-to-a-graphic-for-typographical-effect><span class=secno>4.8.4.3.5</span> Text that has been rendered to a graphic for typographical effect<a href=#text-that-has-been-rendered-to-a-graphic-for-typographical-effect class=self-link></a></h6>

  <p>Sometimes, an image just consists of text, and the purpose of the image is not to highlight the
  actual typographic effects used to render the text, but just to convey the text itself.</p>

  <p>In such cases, the <code id=text-that-has-been-rendered-to-a-graphic-for-typographical-effect:attr-img-alt><a href=embedded-content.html#attr-img-alt>alt</a></code> attribute must be present but must
  consist of the same text as written in the image itself.</p>

  <div class=example>

   <p>Consider a graphic containing the text "Earth Day", but with the letters all decorated with
   flowers and plants. If the text is merely being used as a heading, to spice up the page for
   graphical users, then the correct alternative text is just the same text "Earth Day", and no
   mention need be made of the decorations:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c-><strong><c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;earthdayheading.png&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;Earth Day&quot;</c-><c- p>&gt;</c-></strong><c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>An illuminated manuscript might use graphics for some of its images. The alternative text in
   such a situation is just the character that the image represents.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;initials/o.svg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;O&quot;</c-><c- p>&gt;</c->nce upon a time and a long long time ago, late at
night, when it was dark, over the hills, through the woods, across a great ocean, in a land far
away, in a small house, on a hill, under a full moon...</code></pre> 

  </div>

  <p>When an image is used to represent a character that cannot otherwise be represented in Unicode,
  for example gaiji, itaiji, or new characters such as novel currency symbols, the alternative text
  should be a more conventional way of writing the same thing, e.g. using the phonetic hiragana or
  katakana to give the character's pronunciation.</p>

  <div class=example>

   <p>In this example from 1997, a new-fangled currency symbol that looks like a curly E with two
   bars in the middle instead of one is represented using an image. The alternative text gives the
   character's pronunciation.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Only <c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;euro.png&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;euro &quot;</c-><c- p>&gt;</c->5.99!</code></pre>

  </div>

  <p>An image should not be used if characters would serve an identical purpose. Only when the text
  cannot be directly represented using text, e.g., because of decorations or because there is no
  appropriate character (as in the case of gaiji), would an image be appropriate.</p>

  <p class=note>If an author is tempted to use an image because their default system font does not
  support a given character, then web fonts are a better solution than images.</p>



  <h6 id=a-graphical-representation-of-some-of-the-surrounding-text><span class=secno>4.8.4.3.6</span> A graphical representation of some of the surrounding text<a href=#a-graphical-representation-of-some-of-the-surrounding-text class=self-link></a></h6>

  <p>In many cases, the image is actually just supplementary, and its presence merely reinforces the
  surrounding text. In these cases, the <code id=a-graphical-representation-of-some-of-the-surrounding-text:attr-img-alt><a href=embedded-content.html#attr-img-alt>alt</a></code> attribute must be
  present but its value must be the empty string.</p>

  <p>In general, an image falls into this category if removing the image doesn't make the page any
  less useful, but including the image makes it a lot easier for users of visual browsers to
  understand the concept.</p>

  <div class=example>

   <p>A flowchart that repeats the previous paragraph in graphical form:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->The Network passes data to the Input Stream Preprocessor, which
passes it to the Tokenizer, which passes it to the Tree Construction
stage. From there, data goes to both the DOM and to Script Execution.
Script Execution is linked to the DOM, and, using document.write(),
passes data to the Tokenizer.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<strong><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;images/parsing-model-overview.svg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;&quot;</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></strong></code></pre>

   <p>In these cases, it would be wrong to include alternative text that consists of just a caption.
   If a caption is to be included, then either the <code id=a-graphical-representation-of-some-of-the-surrounding-text:attr-title><a href=dom.html#attr-title>title</a></code> attribute
   can be used, or the <code id=a-graphical-representation-of-some-of-the-surrounding-text:the-figure-element><a href=grouping-content.html#the-figure-element>figure</a></code> and <code id=a-graphical-representation-of-some-of-the-surrounding-text:the-figcaption-element><a href=grouping-content.html#the-figcaption-element>figcaption</a></code> elements can be used. In the
   latter case, the image would in fact be a phrase or paragraph with an alternative graphical
   representation, and would thus require alternative text.</p>

   <pre><code class='html'><c- c>&lt;!-- Using the title=&quot;&quot; attribute --&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->The Network passes data to the Input Stream Preprocessor, which
passes it to the Tokenizer, which passes it to the Tree Construction
stage. From there, data goes to both the DOM and to Script Execution.
Script Execution is linked to the DOM, and, using document.write(),
passes data to the Tokenizer.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-><strong><c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;images/parsing-model-overview.svg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;&quot;</c->
        <c- e>title</c-><c- o>=</c-><c- s>&quot;Flowchart representation of the parsing model.&quot;</c-><c- p>&gt;</c-></strong><c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <pre><code class='html'><c- c>&lt;!-- Using &lt;figure&gt; and &lt;figcaption&gt; --&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->The Network passes data to the Input Stream Preprocessor, which
passes it to the Tokenizer, which passes it to the Tree Construction
stage. From there, data goes to both the DOM and to Script Execution.
Script Execution is linked to the DOM, and, using document.write(),
passes data to the Tokenizer.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>figure</c-><c- p>&gt;</c->
 <strong><c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;images/parsing-model-overview.svg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;The Network leads to</c->
<c- s> the Input Stream Preprocessor, which leads to the Tokenizer, which</c->
<c- s> leads to the Tree Construction stage. The Tree Construction stage</c->
<c- s> leads to two items. The first is Script Execution, which leads via</c->
<c- s> document.write() back to the Tokenizer. The second item from which</c->
<c- s> Tree Construction leads is the DOM. The DOM is related to the Script</c->
<c- s> Execution.&quot;</c-><c- p>&gt;</c-></strong>
 <c- p>&lt;</c-><c- f>figcaption</c-><c- p>&gt;</c->Flowchart representation of the parsing model.<c- p>&lt;/</c-><c- f>figcaption</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>figure</c-><c- p>&gt;</c-></code></pre>

   <pre class=bad><code class='html'><c- c>&lt;!-- This is WRONG. Do not do this. Instead, do what the above examples do. --&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->The Network passes data to the Input Stream Preprocessor, which
passes it to the Tokenizer, which passes it to the Tree Construction
stage. From there, data goes to both the DOM and to Script Execution.
Script Execution is linked to the DOM, and, using document.write(),
passes data to the Tokenizer.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;images/parsing-model-overview.svg&quot;</c->
        <c- e>alt</c-><c- o>=</c-><c- s>&quot;Flowchart representation of the parsing model.&quot;</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- c>&lt;!-- Never put the image&apos;s caption in the alt=&quot;&quot; attribute! --&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>A graph that repeats the previous paragraph in graphical form:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->According to a study covering several billion pages,
about 62% of documents on the web in 2007 triggered the Quirks
rendering mode of web browsers, about 30% triggered the Almost
Standards mode, and about 9% triggered the Standards mode.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<strong><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;rendering-mode-pie-chart.png&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;&quot;</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></strong></code></pre>

  </div>



  <h6 id=ancillary-images><span class=secno>4.8.4.3.7</span> Ancillary images<a href=#ancillary-images class=self-link></a></h6>

  <p>Sometimes, an image is not critical to the content, but is nonetheless neither purely
  decorative nor entirely redundant with the text. In these cases, the <code id=ancillary-images:attr-img-alt><a href=embedded-content.html#attr-img-alt>alt</a></code> attribute must be present, and its value should either be the
  empty string, or a textual representation of the information that the image conveys. If the image
  has a caption giving the image's title, then the <code id=ancillary-images:attr-img-alt-2><a href=embedded-content.html#attr-img-alt>alt</a></code>
  attribute's value must not be empty (as that would be quite confusing for non-visual readers).</p>

  <div class=example>

   <p>Consider a news article about a political figure, in which the individual's face was shown in
   an image. The image is not purely decorative, as it is relevant to the story. The image is not
   entirely redundant with the story either, as it shows what the politician looks like. Whether
   any alternative text need be provided is an authoring decision, decided by whether the image
   influences the interpretation of the prose.</p>

   <p>In this first variant, the image is shown without context, and no alternative text is
   provided:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-><strong><c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;president.jpeg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;&quot;</c-><c- p>&gt;</c-></strong> Ahead of today&apos;s referendum,
the President wrote an open letter to all registered voters. In it, she admitted that the country was
divided.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <p>If the picture is just a face, there might be no value in describing it. It's of no interest
   to the reader whether the individual has red hair or blond hair, whether the individual has white
   skin or black skin, whether the individual has one eye or two eyes.</p>

   <p>However, if the picture is more dynamic, for instance showing the politician as angry, or
   particularly happy, or devastated, some alternative text would be useful in setting the tone of
   the article, a tone that might otherwise be missed:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-><strong><c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;president.jpeg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;The President is sad.&quot;</c-><c- p>&gt;</c-></strong>
Ahead of today&apos;s referendum, the President wrote an open letter to all
registered voters. In it, she admitted that the country was divided.
<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-><strong><c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;president.jpeg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;The President is happy!&quot;</c-><c- p>&gt;</c-></strong>
Ahead of today&apos;s referendum, the President wrote an open letter to all
registered voters. In it, she admitted that the country was divided.
<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <p>Whether the individual was "sad" or "happy" makes a difference to how the rest of the
   paragraph is to be interpreted: is she likely saying that she is unhappy with the country
   being divided, or is she saying that the prospect of a divided country is good for her
   political career? The interpretation varies based on the image.</p>

  </div>

  <div class=example>

   <p>If the image has a caption, then including alternative text avoids leaving the non-visual user
   confused as to what the caption refers to.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Ahead of today&apos;s referendum, the President wrote an open letter to
all registered voters. In it, she admitted that the country was divided.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<strong><c- p>&lt;</c-><c- f>figure</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;president.jpeg&quot;</c->
      <c- e>alt</c-><c- o>=</c-><c- s>&quot;A high forehead, cheerful disposition, and dark hair round out the President&apos;s face.&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>figcaption</c-><c- p>&gt;</c-> The President of Ruritania. Photo © 2014 PolitiPhoto. <c- p>&lt;/</c-><c- f>figcaption</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>figure</c-><c- p>&gt;</c-></strong></code></pre>

  </div>



  <h6 id="a-purely-decorative-image-that-doesn't-add-any-information"><span class=secno>4.8.4.3.8</span> A purely decorative image that doesn't add any information<a href="#a-purely-decorative-image-that-doesn't-add-any-information" class=self-link></a></h6>

  <p>If an image is decorative but isn't especially page-specific — for example an image that
  forms part of a site-wide design scheme — the image should be specified in the site's CSS,
  not in the markup of the document.</p>

  <p>However, a decorative image that isn't discussed by the surrounding text but still has some
  relevance can be included in a page using the <code id="a-purely-decorative-image-that-doesn't-add-any-information:the-img-element"><a href=embedded-content.html#the-img-element>img</a></code> element. Such images are
  decorative, but still form part of the content. In these cases, the <code id="a-purely-decorative-image-that-doesn't-add-any-information:attr-img-alt"><a href=embedded-content.html#attr-img-alt>alt</a></code> attribute must be present but its value must be the empty
  string.</p>

  <div class=example>

   <p>Examples where the image is purely decorative despite being relevant would include things like
   a photo of the Black Rock City landscape in a blog post about an event at Burning Man, or an
   image of a painting inspired by a poem, on a page reciting that poem. The following snippet shows
   an example of the latter case (only the first verse is included in this snippet):</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->The Lady of Shalott<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
<strong><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;shalott.jpeg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;&quot;</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></strong>
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->On either side the river lie<c- p>&lt;</c-><c- f>br</c-><c- p>&gt;</c->
Long fields of barley and of rye,<c- p>&lt;</c-><c- f>br</c-><c- p>&gt;</c->
That clothe the wold and meet the sky;<c- p>&lt;</c-><c- f>br</c-><c- p>&gt;</c->
And through the field the road run by<c- p>&lt;</c-><c- f>br</c-><c- p>&gt;</c->
To many-tower&apos;d Camelot;<c- p>&lt;</c-><c- f>br</c-><c- p>&gt;</c->
And up and down the people go,<c- p>&lt;</c-><c- f>br</c-><c- p>&gt;</c->
Gazing where the lilies blow<c- p>&lt;</c-><c- f>br</c-><c- p>&gt;</c->
Round an island there below,<c- p>&lt;</c-><c- f>br</c-><c- p>&gt;</c->
The island of Shalott.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

  </div>


  <h6 id=a-group-of-images-that-form-a-single-larger-picture-with-no-links><span class=secno>4.8.4.3.9</span> A group of images that form a single larger picture with no links<a href=#a-group-of-images-that-form-a-single-larger-picture-with-no-links class=self-link></a></h6>

  <p>When a picture has been sliced into smaller image files that are then displayed together to
  form the complete picture again, one of the images must have its <code id=a-group-of-images-that-form-a-single-larger-picture-with-no-links:attr-img-alt><a href=embedded-content.html#attr-img-alt>alt</a></code> attribute set as per the relevant rules that would be appropriate
  for the picture as a whole, and then all the remaining images must have their <code id=a-group-of-images-that-form-a-single-larger-picture-with-no-links:attr-img-alt-2><a href=embedded-content.html#attr-img-alt>alt</a></code> attribute set to the empty string.</p>

  <div class=example>

   <p>In the following example, a picture representing a company logo for <span>XYZ
   Corp</span> has been split into two pieces, the first containing the letters "XYZ" and the second
   with the word "Corp". The alternative text ("XYZ Corp") is all in the first image.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c-><strong><c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;logo1.png&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;XYZ Corp&quot;</c-><c- p>&gt;&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;logo2.png&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;&quot;</c-><c- p>&gt;</c-></strong><c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>In the following example, a rating is shown as three filled stars and two empty stars. While
   the alternative text could have been "★★★☆☆", the author has
   instead decided to more helpfully give the rating in the form "3 out of 5". That is the
   alternative text of the first image, and the rest have blank alternative text.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Rating: <c- p>&lt;</c-><c- f>meter</c-> <c- e>max</c-><c- o>=</c-><c- s>5</c-> <c- e>value</c-><c- o>=</c-><c- s>3</c-><c- p>&gt;</c-><strong><c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;1&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;3 out of 5&quot;</c->
  <c- p>&gt;&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;1&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;&quot;</c-><c- p>&gt;&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;1&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;&quot;</c-><c- p>&gt;&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;0&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;&quot;</c->
  <c- p>&gt;&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;0&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;&quot;</c-><c- p>&gt;</c-></strong><c- p>&lt;/</c-><c- f>meter</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

  </div>



  <h6 id=a-group-of-images-that-form-a-single-larger-picture-with-links><span class=secno>4.8.4.3.10</span> A group of images that form a single larger picture with links<a href=#a-group-of-images-that-form-a-single-larger-picture-with-links class=self-link></a></h6>

  <p>Generally, <a href=image-maps.html#image-map id=a-group-of-images-that-form-a-single-larger-picture-with-links:image-map>image maps</a> should be used instead of slicing an image
  for links.</p>

  <p>However, if an image is indeed sliced and any of the components of the sliced picture are the
  sole contents of links, then one image per link must have alternative text in its <code id=a-group-of-images-that-form-a-single-larger-picture-with-links:attr-img-alt><a href=embedded-content.html#attr-img-alt>alt</a></code> attribute representing the purpose of the link.</p>

  <div class=example>

   <p>In the following example, a picture representing the flying spaghetti monster emblem, with
   each of the left noodly appendages and the right noodly appendages in different images, so that
   the user can pick the left side or the right side in an adventure.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->The Church<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->You come across a flying spaghetti monster. Which side of His
Noodliness do you wish to reach out for?<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<strong><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;?go=left&quot;</c-> <c- p>&gt;&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;fsm-left.png&quot;</c->  <c- e>alt</c-><c- o>=</c-><c- s>&quot;Left side. &quot;</c-><c- p>&gt;&lt;/</c-><c- f>a</c->
  <c- p>&gt;&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;fsm-middle.png&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;&quot;</c->
  <c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;?go=right&quot;</c-><c- p>&gt;&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;fsm-right.png&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;Right side.&quot;</c-><c- p>&gt;&lt;/</c-><c- f>a</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></strong></code></pre>

  </div>



  <h6 id=a-key-part-of-the-content><span class=secno>4.8.4.3.11</span> A key part of the content<a href=#a-key-part-of-the-content class=self-link></a></h6>

  <p>In some cases, the image is a critical part of the content. This could be the case, for
  instance, on a page that is part of a photo gallery. The image is the whole <em>point</em> of the
  page containing it.</p>

  <p>How to provide alternative text for an image that is a key part of the content depends on the
  image's provenance.</p>

  <dl><dt>The general case<dd>
    <p>When it is possible for detailed alternative text to be provided, for example if the image is
    part of a series of screenshots in a magazine review, or part of a comic strip, or is a
    photograph in a blog entry about that photograph, text that can serve as a substitute for the
    image must be given as the contents of the <code id=a-key-part-of-the-content:attr-img-alt><a href=embedded-content.html#attr-img-alt>alt</a></code> attribute.</p>

    <div class=example>

     <p>A screenshot in a gallery of screenshots for a new OS, with some alternative text:</p>

     <pre><code class='html'><c- p>&lt;</c-><c- f>figure</c-><c- p>&gt;</c->
 <strong><c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;KDE%20Light%20desktop.png&quot;</c->
      <c- e>alt</c-><c- o>=</c-><c- s>&quot;The desktop is blue, with icons along the left hand side in</c->
<c- s>           two columns, reading System, Home, K-Mail, etc. A window is</c->
<c- s>           open showing that menus wrap to a second line if they</c->
<c- s>           cannot fit in the window. The window has a list of icons</c->
<c- s>           along the top, with an address bar below it, a list of</c->
<c- s>           icons for tabs along the left edge, a status bar on the</c->
<c- s>           bottom, and two panes in the middle. The desktop has a bar</c->
<c- s>           at the bottom of the screen with a few buttons, a pager, a</c->
<c- s>           list of open applications, and a clock.&quot;</c-><c- p>&gt;</c-></strong>
 <c- p>&lt;</c-><c- f>figcaption</c-><c- p>&gt;</c->Screenshot of a KDE desktop.<c- p>&lt;/</c-><c- f>figcaption</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>figure</c-><c- p>&gt;</c-></code></pre>

    </div>

    <div class=example>

     <p>A graph in a financial report:</p>

     <pre><code class='html'><strong><c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;sales.gif&quot;</c->
     <c- e>title</c-><c- o>=</c-><c- s>&quot;Sales graph&quot;</c->
     <c- e>alt</c-><c- o>=</c-><c- s>&quot;From 1998 to 2005, sales increased by the following percentages</c->
<c- s>     with each year: 624%, 75%, 138%, 40%, 35%, 9%, 21%&quot;</c-><c- p>&gt;</c-></strong></code></pre>

     <p>Note that "sales graph" would be inadequate alternative text for a sales graph. Text that
     would be a good <em>caption</em> is not generally suitable as replacement text.</p>

    </div>
   <dt>Images that defy a complete description<dd>
    <p>In certain cases, the nature of the image might be such that providing thorough alternative
    text is impractical. For example, the image could be indistinct, or could be a complex fractal,
    or could be a detailed topographical map.</p>

    <p>In these cases, the <code id=a-key-part-of-the-content:attr-img-alt-2><a href=embedded-content.html#attr-img-alt>alt</a></code> attribute must contain some
    suitable alternative text, but it may be somewhat brief.</p>

    <div class=example>

     <p>Sometimes there simply is no text that can do justice to an image. For example, there is
     little that can be said to usefully describe a Rorschach inkblot test. However, a description,
     even if brief, is still better than nothing:</p>

     <pre><code class='html'><c- p>&lt;</c-><c- f>figure</c-><c- p>&gt;</c->
 <strong><c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;/commons/a/a7/Rorschach1.jpg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;A shape with left-right</c->
<c- s> symmetry with indistinct edges, with a small gap in the center, two</c->
<c- s> larger gaps offset slightly from the center, with two similar gaps</c->
<c- s> under them. The outline is wider in the top half than the bottom</c->
<c- s> half, with the sides extending upwards higher than the center, and</c->
<c- s> the center extending below the sides.&quot;</c-><c- p>&gt;</c-></strong>
 <c- p>&lt;</c-><c- f>figcaption</c-><c- p>&gt;</c->A black outline of the first of the ten cards
 in the Rorschach inkblot test.<c- p>&lt;/</c-><c- f>figcaption</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>figure</c-><c- p>&gt;</c-></code></pre>

     <p>Note that the following would be a very bad use of alternative text:</p>

     <pre class=bad><code class='html'><c- c>&lt;!-- This example is wrong. Do not copy it. --&gt;</c->
<c- p>&lt;</c-><c- f>figure</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;/commons/a/a7/Rorschach1.jpg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;A black outline</c->
<c- s> of the first of the ten cards in the Rorschach inkblot test.&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>figcaption</c-><c- p>&gt;</c->A black outline of the first of the ten cards
 in the Rorschach inkblot test.<c- p>&lt;/</c-><c- f>figcaption</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>figure</c-><c- p>&gt;</c-></code></pre>

     <p>Including the caption in the alternative text like this isn't useful because it effectively
     duplicates the caption for users who don't have images, taunting them twice yet not helping
     them any more than if they had only read or heard the caption once.</p>

    </div>

    <div class=example>

     <p>Another example of an image that defies full description is a fractal, which, by definition,
     is infinite in detail.</p>

     <p>The following example shows one possible way of providing alternative text for the full view
     of an image of the Mandelbrot set.</p>

     <pre><code class='html'><strong><c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;ms1.jpeg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;The Mandelbrot set appears as a cardioid with</c->
<c- s>its cusp on the real axis in the positive direction, with a smaller</c->
<c- s>bulb aligned along the same center line, touching it in the negative</c->
<c- s>direction, and with these two shapes being surrounded by smaller bulbs</c->
<c- s>of various sizes.&quot;</c-><c- p>&gt;</c-></strong></code></pre>

    </div>

    <div class=example>

     <p>Similarly, a photograph of a person's face, for example in a biography, can be considered
     quite relevant and key to the content, but it can be hard to fully substitute text for:</p>

     <pre><code class='html'><c- p>&lt;</c-><c- f>section</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;bio&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->A Biography of Isaac Asimov<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Born <c- p>&lt;</c-><c- f>b</c-><c- p>&gt;</c->Isaak Yudovich Ozimov<c- p>&lt;/</c-><c- f>b</c-><c- p>&gt;</c-> in 1920, Isaac was a prolific author.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;headpics/asimov.jpeg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;Isaac Asimov had dark hair, a tall forehead, and wore glasses.</c->
<c- s> Later in life, he wore long white sideburns.&quot;</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Asimov was born in Russia, and moved to the US when he was three years old.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->...<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>section</c-><c- p>&gt;</c-></code></pre>

     <p>In such cases it is unnecessary (and indeed discouraged) to include a reference to the
     presence of the image itself in the alternative text, since such text would be redundant with
     the browser itself reporting the presence of the image. For example, if the alternative text
     was "A photo of Isaac Asimov", then a conforming user agent might read that out as "(Image) A
     photo of Isaac Asimov" rather than the more useful "(Image) Isaac Asimov had dark hair, a tall
     forehead, and wore glasses...".</p>

    </div>
   <dt id=unknown-images>Images whose contents are not known<dd>
    <p>In some unfortunate cases, there might be no alternative text available at all, either
    because the image is obtained in some automated fashion without any associated alternative text
    (e.g., a webcam), or because the page is being generated by a script using user-provided images
    where the user did not provide suitable or usable alternative text (e.g. photograph sharing
    sites), or because the author does not themself know what the images represent (e.g. a blind
    photographer sharing an image on their blog).</p>

    <p>In such cases, the <code id=a-key-part-of-the-content:attr-img-alt-3><a href=embedded-content.html#attr-img-alt>alt</a></code> attribute may be omitted, but one of
    the following conditions must be met as well:</p>

    <ul><li id=figcaption-as-alt-condition><p>The <code id=a-key-part-of-the-content:the-img-element><a href=embedded-content.html#the-img-element>img</a></code> element is in a
     <code id=a-key-part-of-the-content:the-figure-element><a href=grouping-content.html#the-figure-element>figure</a></code> element that contains a <code id=a-key-part-of-the-content:the-figcaption-element><a href=grouping-content.html#the-figcaption-element>figcaption</a></code> element that contains
     content other than <a id=a-key-part-of-the-content:inter-element-whitespace href=dom.html#inter-element-whitespace>inter-element whitespace</a>, and, ignoring the
     <code id=a-key-part-of-the-content:the-figcaption-element-2><a href=grouping-content.html#the-figcaption-element>figcaption</a></code> element and its descendants, the <code id=a-key-part-of-the-content:the-figure-element-2><a href=grouping-content.html#the-figure-element>figure</a></code> element has no
     <a id=a-key-part-of-the-content:flow-content-2 href=dom.html#flow-content-2>flow content</a> descendants other than <a id=a-key-part-of-the-content:inter-element-whitespace-2 href=dom.html#inter-element-whitespace>inter-element whitespace</a> and the
     <code id=a-key-part-of-the-content:the-img-element-2><a href=embedded-content.html#the-img-element>img</a></code> element.<li>
      <p>The <code id=a-key-part-of-the-content:attr-title><a href=dom.html#attr-title>title</a></code> attribute is present and has a non-empty
      value.</p>

      
      <p class=note>Relying on the <code id=a-key-part-of-the-content:attr-title-2><a href=dom.html#attr-title>title</a></code> attribute is currently
      discouraged as many user agents do not expose the attribute in an accessible manner as
      required by this specification (e.g. requiring a pointing device such as a mouse to cause a
      tooltip to appear, which excludes keyboard-only users and touch-only users, such as anyone
      with a modern phone or tablet).</p>
     </ul>

    <p class=note>Such cases are to be kept to an absolute minimum. If there is even the slightest
    possibility of the author having the ability to provide real alternative text, then it would not
    be acceptable to omit the <code id=a-key-part-of-the-content:attr-img-alt-4><a href=embedded-content.html#attr-img-alt>alt</a></code> attribute.</p>

    <div class=example>

     <p>A photo on a photo-sharing site, if the site received the image with no metadata other than
     the caption, could be marked up as follows:</p>

     <pre><code class='html'><c- p>&lt;</c-><c- f>figure</c-><c- p>&gt;</c->
 <strong><c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;1100670787_6a7c664aef.jpg&quot;</c-><c- p>&gt;</c-></strong>
 <c- p>&lt;</c-><c- f>figcaption</c-><c- p>&gt;</c->Bubbles traveled everywhere with us.<c- p>&lt;/</c-><c- f>figcaption</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>figure</c-><c- p>&gt;</c-></code></pre>

     <p>It would be better, however, if a detailed description of the important parts of the image
     obtained from the user and included on the page.</p>

    </div>

    <div class=example>

     <p>A blind user's blog in which a photo taken by the user is shown. Initially, the user might
     not have any idea what the photo they took shows:</p>

     <pre><code class='html'><c- p>&lt;</c-><c- f>article</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->I took a photo<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->I went out today and took a photo!<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>figure</c-><c- p>&gt;</c->
  <strong><c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;photo2.jpeg&quot;</c-><c- p>&gt;</c-></strong>
  <c- p>&lt;</c-><c- f>figcaption</c-><c- p>&gt;</c->A photograph taken blindly from my front porch.<c- p>&lt;/</c-><c- f>figcaption</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>figure</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>article</c-><c- p>&gt;</c-></code></pre>

     <p>Eventually though, the user might obtain a description of the image from their friends and
     could then include alternative text:</p>

     <pre><code class='html'><c- p>&lt;</c-><c- f>article</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->I took a photo<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->I went out today and took a photo!<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>figure</c-><c- p>&gt;</c->
  <strong><c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;photo2.jpeg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;The photograph shows my squirrel</c->
<c- s>  feeder hanging from the edge of my roof. It is half full, but there</c->
<c- s>  are no squirrels around. In the background, out-of-focus trees fill the</c->
<c- s>  shot. The feeder is made of wood with a metal grate, and it contains</c->
<c- s>  peanuts. The edge of the roof is wooden too, and is painted white</c->
<c- s>  with light blue streaks.&quot;</c-><c- p>&gt;</c-></strong>
  <c- p>&lt;</c-><c- f>figcaption</c-><c- p>&gt;</c->A photograph taken blindly from my front porch.<c- p>&lt;/</c-><c- f>figcaption</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>figure</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>article</c-><c- p>&gt;</c-></code></pre>

    </div>

    <div class=example>

     <p>Sometimes the entire point of the image is that a textual description is not available, and
     the user is to provide the description. For instance, the point of a CAPTCHA image is to see if
     the user can literally read the graphic. Here is one way to mark up a CAPTCHA (note the <code id=a-key-part-of-the-content:attr-title-3><a href=dom.html#attr-title>title</a></code> attribute):</p>

     <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->What does this image say?
<strong><c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;captcha.cgi?id=8934&quot;</c-> <c- e>title</c-><c- o>=</c-><c- s>&quot;CAPTCHA&quot;</c-><c- p>&gt;</c-></strong>
<c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>text</c-> <c- e>name</c-><c- o>=</c-><c- s>captcha</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
(If you cannot see the image, you can use an <c- p>&lt;</c-><c- f>a</c->
<c- e>href</c-><c- o>=</c-><c- s>&quot;?audio&quot;</c-><c- p>&gt;</c->audio<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-> test instead.)<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

     <p>Another example would be software that displays images and asks for alternative text
     precisely for the purpose of then writing a page with correct alternative text. Such a page
     could have a table of images, like this:</p>

     <pre><code class='html'><c- p>&lt;</c-><c- f>table</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>thead</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c-> Image <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c-> Description
 <c- p>&lt;</c-><c- f>tbody</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> <strong><c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;2421.png&quot;</c-> <c- e>title</c-><c- o>=</c-><c- s>&quot;Image 640 by 100, filename &apos;banner.gif&apos;&quot;</c-><c- p>&gt;</c-></strong>
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;alt2421&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> <strong><c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;2422.png&quot;</c-> <c- e>title</c-><c- o>=</c-><c- s>&quot;Image 200 by 480, filename &apos;ad3.gif&apos;&quot;</c-><c- p>&gt;</c-></strong>
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;alt2422&quot;</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>table</c-><c- p>&gt;</c-></code></pre>

     <p>Notice that even in this example, as much useful information as possible is still included
     in the <code id=a-key-part-of-the-content:attr-title-4><a href=dom.html#attr-title>title</a></code> attribute.</p>

    </div>

    <p class=note>Since some users cannot use images at all (e.g. because they have a very slow
    connection, or because they are using a text-only browser, or because they are listening to the
    page being read out by a hands-free automobile voice web browser, or simply because they are
    blind), the <code id=a-key-part-of-the-content:attr-img-alt-5><a href=embedded-content.html#attr-img-alt>alt</a></code> attribute is only allowed to be omitted rather
    than being provided with replacement text when no alternative text is available and none can be
    made available, as in the above examples. Lack of effort from the part of the author is not an
    acceptable reason for omitting the <code id=a-key-part-of-the-content:attr-img-alt-6><a href=embedded-content.html#attr-img-alt>alt</a></code> attribute.</p>
   </dl>



  <h6 id=an-image-not-intended-for-the-user><span class=secno>4.8.4.3.12</span> An image not intended for the user<a href=#an-image-not-intended-for-the-user class=self-link></a></h6>

  <p>Generally authors should avoid using <code id=an-image-not-intended-for-the-user:the-img-element><a href=embedded-content.html#the-img-element>img</a></code> elements for purposes other than showing
  images.</p>

  <p>If an <code id=an-image-not-intended-for-the-user:the-img-element-2><a href=embedded-content.html#the-img-element>img</a></code> element is being used for purposes other than showing an image, e.g. as
  part of a service to count page views, then the <code id=an-image-not-intended-for-the-user:attr-img-alt><a href=embedded-content.html#attr-img-alt>alt</a></code> attribute
  must be the empty string.</p>

  <p>In such cases, the <code id=an-image-not-intended-for-the-user:attr-dim-width><a href=embedded-content-other.html#attr-dim-width>width</a></code> and <code id=an-image-not-intended-for-the-user:attr-dim-height><a href=embedded-content-other.html#attr-dim-height>height</a></code> attributes should both be set to zero.</p>


  <h6 id=an-image-in-an-e-mail-or-private-document-intended-for-a-specific-person-who-is-known-to-be-able-to-view-images><span class=secno>4.8.4.3.13</span> An image in an email or private document intended for a specific person who is known to be able to view images<a href=#an-image-in-an-e-mail-or-private-document-intended-for-a-specific-person-who-is-known-to-be-able-to-view-images class=self-link></a></h6>

  <p><i>This section does not apply to documents that are publicly accessible, or whose target
  audience is not necessarily personally known to the author, such as documents on a web site,
  emails sent to public mailing lists, or software documentation.</i></p>

  <p>When an image is included in a private communication (such as an HTML email) aimed at a
  specific person who is known to be able to view images, the <code id=an-image-in-an-e-mail-or-private-document-intended-for-a-specific-person-who-is-known-to-be-able-to-view-images:attr-img-alt><a href=embedded-content.html#attr-img-alt>alt</a></code>
  attribute may be omitted. However, even in such cases authors are strongly urged to include
  alternative text (as appropriate according to the kind of image involved, as described in the
  above entries), so that the email is still usable should the user use a mail client that does not
  support images, or should the document be forwarded on to other users whose abilities might not
  include easily seeing images.</p>




  

  


  <nav><a href=embedded-content.html>← 4.8 Embedded content</a> — <a href=index.html>Table of Contents</a> — <a href=iframe-embed-object.html>4.8.5 The
  iframe element →</a></nav>
